@charset 'utf-8';

/* ==========================================================================

	TOP

   ========================================================================== */

/*--------------------------------
    基本レイアウト
--------------------------------*/

.container {
    overflow: visible;
}

a:hover img {
    opacity: 0.7;
}

@media only screen and (max-width: 812px) {

    a:hover img {
        opacity: 1;
    }
}

#topHeader .centerTitle {
    width: 40%;
    max-width: none;
}

body.switch #topHeader .centerTitle {
    width: 20%;
}

@media only screen and (max-width: 812px) {
    #topHeader .centerTitle {
        width: 80%;
        max-width: none;
    }

    body.switch #topHeader .centerTitle {
        width: 50%;
    }
}

/*--------------------------------
    目次
--------------------------------*/

#INDEX {
    width: 100vw;
    height: 100vh;
	text-align: center;
    padding:0;
    margin: 0 auto;
    background: #BCE1EC url(../images/bg_index_sky.png) repeat-y center top / 100% auto;
    background-attachment: fixed;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

#INDEX .mainvisual {
    width: 100vw;
    height: 56vw;
    padding:0;
    margin: 0 auto;
    background: transparent url(../images/bg_index.png) no-repeat center bottom / 100% auto;
    position: relative;
}

#INDEX .btn_suiden {
    width: 18%;
    height: auto;
    position: absolute;
    left: 62.2%;
    bottom: 4%;
    z-index: 4;
}

#INDEX .btn_kajuen {
    width: 18%;
    height: auto;
    position: absolute;
    left: 2.5%;
    bottom: 4%;
    z-index: 4;
}

#INDEX .btn_kyukoden {
    width: 18%;
    height: auto;
    position: absolute;
    left: 73%;
    bottom: 46.5%;
    z-index: 2;
}

#INDEX .btn_ryokuchi {
    width: 18%;
    height: auto;
    position: absolute;
    left: 13%;
    bottom: 46.5%;
    z-index: 2;
}

#INDEX .btn_hatake {
    width: 18%;
    height: auto;
    position: absolute;
    left: 44%;
    bottom: 46.5%;
    z-index: 2;
}

#INDEX .btn_tokusetsu {
    width: 18%;
    height: auto;
    position: absolute;
    left: 31%;
    bottom: 3%;
    z-index: 5;
}

/* #INDEX .btn_ryokuchi a::after,
#INDEX .btn_hatake a::after,
#INDEX .btn_tokusetsu a::after {
    content: "";
    display: block;
    width:8vw;
    height:8vw;
    background: transparent url(../images/new.png) no-repeat center center / contain;
    position: absolute;
}

#INDEX .btn_ryokuchi a::after,
#INDEX .btn_hatake a::after {
    top:-60%;
    left: -14%;
}

#INDEX .btn_tokusetsu a::after {
    top:-35%;
    left: -10%;
} */

#INDEX .btn_p1 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 68%;
    bottom: 29%;
    z-index: 3;
}

#INDEX .btn_p2 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 78%;
    bottom: 24%;
    z-index: 3;
}

#INDEX .btn_p3 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 72%;
    bottom: 15%;
    z-index: 3;
}

#INDEX .btn_p4 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 18%;
    bottom: 22%;
    z-index: 3;
}

#INDEX .btn_p5 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 6%;
    bottom: 34%;
    z-index: 3;
}

#INDEX .btn_p6 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 85%;
    bottom: 61%;
    z-index: 1;
}

#INDEX .btn_p7 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 76%;
    bottom: 58%;
    z-index: 1;
}

#INDEX .btn_p8 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 2.5%;
    bottom: 16%;
    z-index: 3;
}

#INDEX .btn_p9 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 24%;
    bottom: 58%;
    z-index: 1;
}

#INDEX .btn_p10 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 16%;
    bottom: 59%;
    z-index: 1;
}

#INDEX .btn_p11 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 47%;
    bottom: 58%;
    z-index: 1;
}

#INDEX .btn_p12 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 56%;
    bottom: 59%;
    z-index: 1;
}

#INDEX .btn_p13 {
    width: 14%;
    height: auto;
    position: absolute;
    left: 36.5%;
    bottom: 34.3%;
    z-index: 3;
}

#INDEX .btn_p14 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 34%;
    bottom: 20.8%;
    z-index: 3;
}

#INDEX .btn_p15 {
    width: 11%;
    height: auto;
    position: absolute;
    left: 45.5%;
    bottom: 25%;
    z-index: 3;
}

@media only screen and (min-width: 813px) {
    #INDEX .btn_p1.zoom a:hover img,
    #INDEX .btn_p2.zoom a:hover img,
    #INDEX .btn_p3.zoom a:hover img,
    #INDEX .btn_p4.zoom a:hover img,
    #INDEX .btn_p5.zoom a:hover img,
    #INDEX .btn_p6.zoom a:hover img,
    #INDEX .btn_p7.zoom a:hover img,
    #INDEX .btn_p8.zoom a:hover img,
    #INDEX .btn_p9.zoom a:hover img,
    #INDEX .btn_p10.zoom a:hover img,
    #INDEX .btn_p11.zoom a:hover img,
    #INDEX .btn_p12.zoom a:hover img,
    #INDEX .btn_p13.zoom a:hover img,
    #INDEX .btn_p14.zoom a:hover img,
    #INDEX .btn_p15.zoom a:hover img {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

/* スクロール */

#INDEX .btn_scroll {
	display: block;
	position: absolute;
	bottom: 20px;
	left: 50%;
	-webkit-transform:translate(-50%, 0);
	transform:translate(-50%, 0);
	font-size: 1.1rem;
}

#INDEX .btn_scroll a:link,
#INDEX .btn_scroll a:visited { color:#fff; }
#INDEX .btn_scroll a:hover,
#INDEX .btn_scroll a:active { color:#999; }

#INDEX .btn_scroll svg {
	display: block;
	width: 40px;
	height: 40px;
	fill: #fff;
	margin: -10px auto 0;
	-webkit-animation: scroll 2s linear infinite;
	animation: scroll 2s linear infinite;
}

#INDEX .btn_scroll:hover svg {
	fill: #999;
}

@-webkit-keyframes scroll {
	0% { -webkit-transform:translate(0, 0); opacity: 0;}
	50% { opacity: 1;}
	100% {-webkit-transform:translate(0, 15px); opacity: 0;}
}

@keyframes scroll {
	0% { transform:translate(0, 0); opacity: 0;}
	50% { opacity: 1;}
	100% { transform:translate(0, 15px); opacity: 0;}
}


/* アスペクト比が極端な場合 */

body.aspect #INDEX {
    height: auto;
    background: #BCE1EC url(../images/bg_index_sky.png) repeat-y center top / 100% auto;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

body.aspect #INDEX .mainvisual {
    width: 100vw;
    height: 60vw;
    background: transparent url(../images/bg_index.png) no-repeat center bottom / 100% auto;
}

body.aspect #INDEX .btn_suiden {
    bottom: auto;
    top:85%;
}

body.aspect #INDEX .btn_kajuen {
    bottom: auto;
    top:85%;
}

body.aspect #INDEX .btn_kyukoden {
    bottom: auto;
    top:45%;
}

body.aspect #INDEX .btn_ryokuchi {
    bottom: auto;
    top:45%;
}

body.aspect #INDEX .btn_hatake {
    bottom: auto;
    top:45%;
}

body.aspect #INDEX .btn_tokusetsu {
    bottom: auto;
    top:82%;
}

body.aspect #INDEX .btn_p1 {
    bottom: auto;
    top:58%;
}

body.aspect #INDEX .btn_p2 {
    bottom: auto;
    top:63%;
}

body.aspect #INDEX .btn_p3 {
    bottom: auto;
    top:72%;
}

body.aspect #INDEX .btn_p4 {
    bottom: auto;
    top:65%;
}

body.aspect #INDEX .btn_p5 {
    bottom: auto;
    top:54%;
}

body.aspect #INDEX .btn_p6 {
    bottom: auto;
    top:28%;
}

body.aspect #INDEX .btn_p7 {
    bottom: auto;
    top:31%;
}

body.aspect #INDEX .btn_p8 {
    bottom: auto;
    top:70%;
}

body.aspect #INDEX .btn_p9 {
    bottom: auto;
    top:30.5%;
}

body.aspect #INDEX .btn_p10 {
    bottom: auto;
    top:29%;
}

body.aspect #INDEX .btn_p11 {
    bottom: auto;
    top:29%;
}

body.aspect #INDEX .btn_p12 {
    bottom: auto;
    top:27%;
}

body.aspect #INDEX .btn_p13 {
    bottom: auto;
    top:55%;
}

body.aspect #INDEX .btn_p14 {
    bottom: auto;
    top:65.5%;
}

body.aspect #INDEX .btn_p15 {
    bottom: auto;
    top:61.5%;
}

body.aspect #INDEX .btn_scroll {
    display: none;
}


@media only screen and (max-width: 812px) {
    
    #INDEX {
        padding: 0;
        height: auto;
        background: #B1D561;
        background-attachment: scroll;
        margin-top: 50px;
    }

    #INDEX .mainvisual {
        width: 100vw;
        height: auto;
        background: #B1D561 url(../images/bg_index_sp.png) no-repeat center top / 100% auto;
        position: relative;
        padding-top: 42vw;
/*        padding-bottom: 22vw*/
    }
    #INDEX .btn_tokusetsu {
        width: 40%;
        position: relative;
        left: 0;
        bottom: 0;
        margin: 0 auto;
    }

    #INDEX .btn_suiden {
        width: 40%;
        position: relative;
        left: 0;
        bottom: 0;
        margin: 25.4vw auto 4vw;
    }

    #INDEX .btn_kajuen {
        width: 40%;
        position: relative;
        left: 0;
        bottom: 0;
        margin: 25.4vw auto 4vw;
    }

    #INDEX .btn_kyukoden {
        width: 40%;
        position: relative;
        left: 0;
        bottom: 0;
        margin: 25.4vw auto 4vw;
    }
    
    #INDEX .btn_ryokuchi {
        width: 40%;
        position: relative;
        left: 0;
        bottom: 0;
        margin: 25.4vw auto 4vw;
    }
    
    #INDEX .btn_hatake {
        width: 40%;
        position: relative;
        left: 0;
        bottom: 0;
        margin: 25.5vw auto 4vw;
    }
    
    /* #INDEX .btn_ryokuchi a::after,
    #INDEX .btn_hatake a::after,
    #INDEX .btn_tokusetsu a::after {
        width:18vw;
        height:18vw;
    }

    #INDEX .btn_ryokuchi a::after,
    #INDEX .btn_hatake a::after {
        top:-62%;
        left: -12%;
    }

    #INDEX .btn_tokusetsu a::after {
        top:-35%;
        left: -10%;
    } */


    #INDEX .btn_p1 {
        width: 20%;
        left: 35%;
        bottom: auto;
        top:26%;
    }

    #INDEX .btn_p2 {
        width: 15%;
        left: 73%;
        bottom: auto;
        top:28%;
    }

    #INDEX .btn_p3 {
        width: 18%;
        left: 10%;
        bottom: auto;
        top:32%;
    }

    #INDEX .btn_p4 {
        width: 20%;
        left: 73%;
        bottom: auto;
        top:45%;
    }

    #INDEX .btn_p5 {
        width: 18%;
        left: 9%;
        bottom: auto;
        top:37%;
    }

    #INDEX .btn_p6 {
        width: 19%;
        left: 9%;
        bottom: auto;
        top:60%;
    }

    #INDEX .btn_p7 {
        width: 20%;
        left: 40%;
        bottom: auto;
        top:54%;
    }

    #INDEX .btn_p8 {
        width: 18%;
        left: 9%;
        bottom: auto;
        top:47%;
    }

    #INDEX .btn_p9 {
        width: 14%;
        left: 60.5%;
        bottom: auto;
        top:72%;
    }

    #INDEX .btn_p10 {
        width: 17%;
        left: 29%;
        bottom: auto;
        top:69%;
    }

    #INDEX .btn_p11 {
        width: 17%;
        left:  32%;
        bottom: auto;
        top:87%;
    }

    #INDEX .btn_p12 {
        width: 15%;
        left: 71%;
        bottom: auto;
        top:87%;
    }

    #INDEX .btn_p13 {
        width: 17%;
        left: 44.2%;
        bottom: auto;
        top:7.8%;
    }

    #INDEX .btn_p14 {
        width: 16%;
        left: 13%;
        bottom: auto;
        top:14%;
    }

    #INDEX .btn_p15 {
        width: 16%;
        left: 67.5%;
        bottom: auto;
        top:12.3%;
    }


    /* スクロール */

    #INDEX .btn_scroll {
        display: none;

        bottom: 5px;
        font-size: 1.0rem;
    }

    #INDEX .btn_scroll a:link,
    #INDEX .btn_scroll a:visited { color:#fff; }
    #INDEX .btn_scroll a:hover,
    #INDEX .btn_scroll a:active { color:#fff; }

    #INDEX .btn_scroll:hover svg {
        fill: #fff;
    }
}

/*--------------------------------
    イントロ
--------------------------------*/

#INTRO {
    width: 100vw;
    height: auto;
    padding:10vw 0;
    margin: 0 auto;
    background: #B1D561 url(../images/bg_intro.png) no-repeat center top / 100% auto;
    position: relative;
    
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

#INTRO .container {
    width: 50%;
    max-width: 50%;
    min-width: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    margin: 0;
}

#INTRO .title_intro {
    
}

#INTRO .baloon00 {
/*    width: 80%;*/
    width: calc(20em + 20px);
    padding: 30px 10px;
    margin: 0 0 0 auto;
    background-color: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    
    text-align: center;
}

#INTRO .baloon00::before {
    content: '';
    display: block;
    width: 18px;
    height: 30px;
    background: transparent url(/virtual-exhibition/common/images/fukidashi.png) no-repeat center top / contain;
    position: absolute;
    top:100%;
    right: 40px;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

#INTRO .baloon00::after {
    content: '';
    display: block;
    width: 4.5vw;
    height: 9.9vw;
    background: transparent url(../images/fig_p0.png) no-repeat center center / contain;
    position: absolute;
    top:90%;
    right: -2vw;
}

#INTRO .baloon01 {
    width: 85%;
    padding: 30px;
    margin: 5vw auto 0 0;
    background-color: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

#INTRO .baloon01::before {
    content: '';
    display: block;
    width: 18px;
    height: 30px;
    background: transparent url(/virtual-exhibition/common/images/fukidashi.png) no-repeat center top / contain;
    position: absolute;
    top:100%;
    left: 30px;
}

#INTRO .baloon01::after {
    content: '';
    display: block;
    width: 4.5vw;
    height: 9.9vw;
    background: transparent url(../images/fig_p1.png) no-repeat center center / contain;
    position: absolute;
    top:90%;
    left: -2vw;
}

#INTRO .baloon02 {
    width: 85%;
    padding: 30px;
    margin: 5vw 0 0 auto;
    background-color: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}

#INTRO .baloon02::before {
    content: '';
    display: block;
    width: 18px;
    height: 30px;
    background: transparent url(/virtual-exhibition/common/images/fukidashi.png) no-repeat center top / contain;
    position: absolute;
    top:100%;
    right: 40px;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

#INTRO .baloon02::after {
    content: '';
    display: block;
    width: 4.5vw;
    height: 9.9vw;
    background: transparent url(../images/fig_p2.png) no-repeat center center / contain;
    position: absolute;
    top:90%;
    right: -2vw;
}

#INTRO .baloon00 p,
#INTRO .baloon01 p,
#INTRO .baloon02 p {
    margin: 0;
}


@media only screen and (max-width: 812px) {
    
    #INTRO {
        padding:10vw 0 50vw;
        background: #B1D561 url(../images/bg_intro_sp.png) no-repeat center bottom / 100% auto;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }

    #INTRO .container {
        width: 100%;
        min-width: 0;
        max-width: none;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    }

    #INTRO .title_intro {

    }

    #INTRO .baloon00 {
        width: 90%;
        text-align: center;
        padding: 2vw;
        margin: 0 0 0 auto;
    }

    #INTRO .baloon00::before {
        width: 9px;
        height: 15px;
        right: 12%;
    }

    #INTRO .baloon00::after {
        width: 11vw;
        height: 27vw;
        top:60%;
        right: -2vw;
    }

    #INTRO .baloon01 {
        width: 90%;
        padding: 6vw;
        margin: 8vw auto 0 0;
        font-size: 1.5rem;
    }

    #INTRO .baloon01::before {
        width: 9px;
        height: 15px;
        left: 12%;
    }

    #INTRO .baloon01::after {
        width: 11vw;
        height: 27vw;
        top:88%;
        left: -2vw;
    }

    #INTRO .baloon02 {
        width: 90%;
        padding: 6vw;
        margin: 8vw 0 0 auto;
        font-size: 1.5rem;
    }

    #INTRO .baloon02::before {
        width: 9px;
        height: 15px;
        right: 12%;
    }

    #INTRO .baloon02::after {
        width: 11vw;
        height: 27vw;
        top:100%;
        right: -2vw;
    }

    #INTRO .baloon00 p,
    #INTRO .baloon01 p,
    #INTRO .baloon02 p {
        line-height: 1.7;
    }

    
}

/*--------------------------------
    フィールド共通
--------------------------------*/

.field {
    width: 100vw;
    height: auto;
    padding:11vw 0 8vw;
    margin: 0 auto;
}

.field .container {
    min-width: 0;
    max-width: none;
}

.field .container .kanbantitle {
    width: 25%;
    margin: 0 auto;
}

.field .container .kanbantitle img {
    width: 100%;
    height: auto;
}

.field .container .maincopy {
    margin: 36vw auto 0;
    font-size: 18px;
    color: #fff;
    text-align: center;
}

.field .container .maincopy p {
    -webkit-text-shadow:0px 0px 5px rgba(0,0,0, 0.16);
    text-shadow:0px 0px 5px rgba(0,0,0, 0.16);
}

.field .container .productlist {
    margin: 6vw auto 0;

    display: -webkit-flex; /* Safari */
    display: flex; /* Chrome, Firefox, IE11 */
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.field .container .productlist > div {
    width:30%;
    max-width: 30%;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    padding: 0 2vw;
}

.field .container .productlist > div:nth-of-type(2) {
    transition-delay: 0.2s;
}

.field .container .productlist > div:nth-of-type(3) {
    transition-delay: 0.4s;
}

.field .container .productlist > div:nth-of-type(4) {
    transition-delay: 0.6s;
}


.field .container .boothlink {
    width: 40%;
    margin: 6vw auto 0;
}


@media only screen and (max-width: 812px) {

    .field {
        padding:26vw 0 14vw;
    }

    .field .container .kanbantitle {
        width: 70%;
    }

    .field .container .maincopy {
        margin: 62vw auto 0;
        font-size: 1.5rem;
        text-align: left;
    }

    .field .container .productlist {
        margin: 10vw auto 0;
    }

    .field .container .productlist > div {
        width:100%;
        max-width: 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        margin: 0 0 4vw;
    }

    .field .container .boothlink {
        width: 100%;
        margin: 6vw auto 0;
    }
    
}

/*--------------------------------
    特設ブース
--------------------------------*/

#TOKUSETSU {
    background: #6FB462 url(../images/bg_tokusetsu.png) no-repeat center top / 100% auto;
}

#TOKUSETSU .container .kanbantitle {
    margin-top: -1.5vw;
}

#TOKUSETSU .container .maincopy {
    /*    background-color: #8EAD2B;*/
}

#TOKUSETSU .container .productlist {

}

#TOKUSETSU .container .boothlink {

}

@media only screen and (max-width: 812px) {

    #TOKUSETSU {
        background: #6FB462 url(../images/bg_tokusetsu_sp.png) no-repeat center top / 100% auto;
    }
    
    #TOKUSETSU .container .kanbantitle {
        margin-top: -8px;
    }

}



/*--------------------------------
    水田
--------------------------------*/

#SUIDEN {
    background: #BCD33E url(../images/bg_suiden.png) no-repeat center top / 100% auto;
}

#SUIDEN .container .kanbantitle {
    
}

#SUIDEN .container .maincopy {
/*    background-color: #8EAD2B;*/
}

#SUIDEN .container .productlist {
    
}

#SUIDEN .container .boothlink {
    
}

@media only screen and (max-width: 812px) {

    #SUIDEN {
        background: #BCD33E url(../images/bg_suiden_sp.png) no-repeat center top / 100% auto;
    }
    
}

/*--------------------------------
    果樹園
--------------------------------*/

#KAJUEN {
    background: #92C346 url(../images/bg_kajuen.png) no-repeat center top / 100% auto;
    padding-top: 11.3vw;
}

#KAJUEN .container .kanbantitle {

}

#KAJUEN .container .maincopy {
/*    background-color: #5D842C;*/
}

#KAJUEN .container .productlist {

}

#KAJUEN .container .boothlink {

}

@media only screen and (max-width: 812px) {

    #KAJUEN {
        background: #92C346 url(../images/bg_kajuen_sp.png) no-repeat center top / 100% auto;
        padding-top: 26vw;
        padding-bottom:36vw;
    }
    
}

/*--------------------------------
    休耕田
--------------------------------*/

#KYUKODEN {
    background: #6FB462 url(../images/bg_kyukoden.png) no-repeat center top / 100% auto;
    padding-top: 11.8vw;
}

#KYUKODEN .container .kanbantitle {

}

#KYUKODEN .container .maincopy {
/*    background-color: #446919;*/
}

#KYUKODEN .container .productlist {

}

#KYUKODEN .container .boothlink {

}

@media only screen and (max-width: 812px) {

    #KYUKODEN {
        background: #6FB462 url(../images/bg_kyukoden_sp.png) no-repeat center top / 100% auto;
        padding-top: 30vw;
        padding-bottom:30vw;
    }

}

/*--------------------------------
    緑地管理
--------------------------------*/

#RYOKUCHI {
    background: #BCD33E url(../images/bg_ryokuchi.png) no-repeat center top / 100% auto;
}

#RYOKUCHI .container .kanbantitle {
}

#RYOKUCHI .container .maincopy {
    /*    background-color: #8EAD2B;*/
}

#RYOKUCHI .container .productlist {

}

#RYOKUCHI .container .boothlink {

}

@media only screen and (max-width: 812px) {

    #RYOKUCHI {
        background: #BCD33E url(../images/bg_ryokuchi_sp.png) no-repeat center top / 100% auto;
    }

}

/*--------------------------------
    畑
--------------------------------*/

#HATAKE {
    background: #92C346 url(../images/bg_hatake.png) no-repeat center top / 100% auto;
}

#HATAKE .container .kanbantitle {
}

#HATAKE .container .maincopy {
    /*    background-color: #8EAD2B;*/
}

#HATAKE .container .productlist {

}

#HATAKE .container .boothlink {

}

@media only screen and (max-width: 812px) {

    #HATAKE {
        background: #92C346 url(../images/bg_hatake_sp.png) no-repeat center top / 100% auto;
    }
    
    #HATAKE .container .kanbantitle {
        margin-top: 5px;
    }
}




/*--------------------------------
    刈り方講座
--------------------------------*/

/* アンカーリンク用位置調整 */

#LECTURE_anc {
    position: relative;
    top:-8vw;
    content: "";
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0 auto 0 0;
    background: transparent;
}

#LECTURE_anc::after {
    display: none;
}

@media only screen and (max-width: 812px) {
    #LECTURE_anc {
        top:-20vw;
    }
}

#LECTURE {
    width: 100vw;
    margin: -10px auto 0; /* アンカーの分上に移動 */
    background: url(/virtual-exhibition/common/images/bar.png) repeat-x center top / auto 14.5vw, url(../images/bg_lecture.png) no-repeat center 14.5vw / 100% auto;
    background-color: #BCD33E;
    position: relative;
    padding:2vw 0 8vw;
}

#LECTURE .container {
    /*    width: 50%;*/
    min-width: 0;
    max-width: none;
}

#LECTURE .container .kanbantitle {
    width: 60%;
    margin: 0 auto 5vw;
}

#LECTURE .baloon {
    width: 45%;
    padding: 25px 30px 30px;
    /*    margin: 0 auto 150px;*/
    margin: 0 auto 2vw;
    background-color: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    z-index: 2;

    font-size: 16px;
    text-align: center;
    color: #017A59;
}

#LECTURE .baloon::before {
    content: '';
    display: block;
    width: 18px;
    height: 30px;
    background: transparent url(/virtual-exhibition/common/images/fukidashi.png) no-repeat center top / contain;
    position: absolute;
    top:100%;
    right: 80px;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

#LECTURE .baloon::after {
    content: '';
    display: block;
    width: 4.5vw;
    height: 9.9vw;
    background: transparent url(../images/fig_p4.png) no-repeat center center / contain;
    position: absolute;
    top:90%;
    right: 0;
}

#LECTURE .baloon strong {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin: 0 auto 0.5em;
}

#LECTURE .baloon p {
    margin: 0;
    text-align: justify;
}

#LECTURE .fig {
    width: 45%;
    margin: 0 auto;
}

#LECTURE .fig img {
    width: 18vw;
    height: auto;
    margin: 0 auto 0 0;
}

#LECTURE .movielist {
    width: 80%;
    min-width: 900px;
    margin: 3vw auto 40px;
    padding: 70px 50px 0;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    -webkit-border-radius: 10px;
    border-radius: 10px;
 
    display: -webkit-flex; /* Safari */
    display: flex; /* Chrome, Firefox, IE11 */
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

#LECTURE .movielist > div {
    width:50%;
    max-width: 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    padding: 0 2vw;
    margin-bottom: 70px;
}

#LECTURE .movielist > div h4 {
    margin: 0 auto 25px;
}

#LECTURE .movielist > div .movie {
    position: relative;
}

#LECTURE .movielist > div .movie::after {
    content: '';
    display: block;
    width: 10vw;
    height: 12vw;
    position: absolute;
    top:5%;
    right: -10%;
}

#LECTURE .movielist > div:nth-of-type(1) .movie::after {
    background: transparent url(../images/lecture_moviecheck01.png) no-repeat center center / contain;
}

#LECTURE .movielist > div:nth-of-type(2) .movie::after {
    background: transparent url(../images/lecture_moviecheck02.png) no-repeat center center / contain;
}

#LECTURE .movielist > div:nth-of-type(3) .movie::after {
    background: transparent url(../images/lecture_moviecheck03.png) no-repeat center center / contain;
}

#LECTURE .movielist > div:nth-of-type(4) .movie::after {
    background: transparent url(../images/lecture_moviecheck04.png) no-repeat center center / contain;
}



@media only screen and (max-width: 812px) {

    #LECTURE {
        width: 100vw;
        background: url(/virtual-exhibition/common/images/bar.png) repeat-x center top / auto 22vw, url(../images/bg_lecture_sp.png) no-repeat center 22vw / 100% auto;
        background-color: #BCD33E;
        padding-top: 3vw;
    }

    #LECTURE .container .kanbantitle {
        width: 100%;
        margin: 0 auto 10vw;
    }

    #LECTURE .baloon {
        width: 100%;
        padding: 6vw;
        margin: 0 auto;
        font-size: 1.5rem;
    }

    #LECTURE .baloon::before {
        width: 9px;
        height: 15px;
        right: 12%;
    }

    #LECTURE .baloon::after {
        width: 11vw;
        height: 27vw;
        top: 90%;
        right: -2vw;
    }

    #LECTURE .baloon strong {
        font-size: 1.8rem;
    }
    
    #LECTURE .fig {
        width: 100%;
        margin: 0 auto;
    }

    #LECTURE .fig img {
        width: 56vw;
        height: auto;
        margin: 10px auto 0 0;
    }

    #LECTURE .movielist {
        margin: 5vw auto 0;
        width: 100%;
        min-width: 0;
        padding: 6vw;
    }

    #LECTURE .movielist > div {
        width:100%;
        max-width: 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        padding: 0;
        margin-bottom: 40px;
    }

    #LECTURE .movielist > div:last-child {
        margin-bottom: 0;
    }
    
    #LECTURE .movielist > div .movie::after {
        width: 36vw;
        height: 30vw;
        top:-13%;
        right: -10%;
    }
    
    #LECTURE .movielist > div:nth-of-type(1) .movie::after {
        background: transparent url(../images/lecture_moviecheck01_sp.png) no-repeat center center / contain;
    }

    #LECTURE .movielist > div:nth-of-type(2) .movie::after {
        background: transparent url(../images/lecture_moviecheck02_sp.png) no-repeat center center / contain;
    }

    #LECTURE .movielist > div:nth-of-type(3) .movie::after {
        background: transparent url(../images/lecture_moviecheck03_sp.png) no-repeat center center / contain;
    }

    #LECTURE .movielist > div:nth-of-type(4) .movie::after {
        background: transparent url(../images/lecture_moviecheck04_sp.png) no-repeat center center / contain;
    }
    
    
}



/*--------------------------------
    アンケート
--------------------------------*/

/* アンカーリンク用位置調整 */

#ENQUETE_anc {
    position: relative;
    top:-8vw;
    content: "";
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0 auto 0 0;
    background: transparent;
}

#ENQUETE_anc::after {
    display: none;
}

@media only screen and (max-width: 812px) {
    #ENQUETE_anc {
        top:-20vw;
    }
}

#ENQUETE {
    width: 100vw;
    margin: -10px auto 0; /* アンカーの分上に移動 */
    background: url(/virtual-exhibition/common/images/bar.png) repeat-x center top / auto 14.5vw, url(../images/bg_enquete.png) no-repeat center 10vw / 100% auto;
    background-color: #BCD33E;
    position: relative;
    padding:2vw 0 8vw;
}

#ENQUETE .container {
    /*    width: 50%;*/
    min-width: 0;
    max-width: none;
}

#ENQUETE .container .kanbantitle {
    width: 60%;
    margin: 0 auto 5vw;
}

#ENQUETE .baloon {
    width: 45%;
    padding: 25px 30px 30px;
    margin: 0 auto 11.5vw;
    background-color: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    z-index: 2;

    font-size: 16px;
    text-align: center;
    color: #5667C4;
}

#ENQUETE .baloon::before {
    content: '';
    display: block;
    width: 18px;
    height: 30px;
    background: transparent url(/virtual-exhibition/common/images/fukidashi.png) no-repeat center top / contain;
    position: absolute;
    top:100%;
    right: 80px;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

#ENQUETE .baloon::after {
    content: '';
    display: block;
    width: 4.5vw;
    height: 9.9vw;
    background: transparent url(../images/fig_p4.png) no-repeat center center / contain;
    position: absolute;
    top:90%;
    right: 0;
}

#ENQUETE .baloon strong {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin: 0 auto 0.5em;
}

#ENQUETE .baloon p {
    margin: 0;
    text-align: justify;
}

#ENQUETE .presentlist {
    margin: 6vw auto 0;

    display: -webkit-flex; /* Safari */
    display: flex; /* Chrome, Firefox, IE11 */
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

/* #ENQUETE .presentlist > div {
    width:30%;
    max-width: 30%;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    padding: 0 2vw;
} */

#ENQUETE .presentlist > div {
    width:60%;
    max-width: 60%;
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    padding: 0 2vw;
    margin-top: -5.5vw;
}


#ENQUETE .btnlink {
    width: 40%;
    margin: 60px auto 0;
}

#ENQUETE .subcopy {
    margin: 60px auto 0;
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
}

#ENQUETE .subcopy p {
    margin-bottom: 5px;
    -webkit-text-shadow:0px 0px 5px rgba(0,0,0, 0.16);
    text-shadow:0px 0px 5px rgba(0,0,0, 0.16);
}

@media only screen and (max-width: 812px) {

    #ENQUETE {
        width: 100vw;
        background: url(/virtual-exhibition/common/images/bar.png) repeat-x center top / auto 22vw, url(../images/bg_enquete_sp.png) no-repeat center 40.5vw / 100% auto;
        background-color: #BCD33E;
        padding-top: 3vw;
    }

    #ENQUETE .container .kanbantitle {
        width: 100%;
        margin: 0 auto 10vw;
    }

    #ENQUETE .baloon {
        width: 100%;
        padding: 6vw;
        margin: 0 auto;
        font-size: 1.5rem;
    }

    #ENQUETE .baloon::before {
        width: 9px;
        height: 15px;
        right: 12%;
    }

    #ENQUETE .baloon::after {
        width: 11vw;
        height: 27vw;
        top: 90%;
        right: -2vw;
    }
    
    #ENQUETE .baloon strong {
        font-size: 1.8rem;
    }

    #ENQUETE .presentlist {
        margin: 20vw auto 0;
        position: relative;
    }

    #ENQUETE .presentlist::before {
        content: '';
        display: block;
        width: 52vw;
        height: 19vw;
        background: transparent url(../images/fig_m_anquet.png) no-repeat center center / contain;
        position: absolute;
        top:-16vw;
        left:50%;
        -webkit-transform:translate(-50%, 0);
        transform:translate(-50%, 0);
    }

    /* #ENQUETE .presentlist > div {
        width:50%;
        max-width: 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        padding: 0 3vw;
    } */
    #ENQUETE .presentlist > div {
        width:100%;
        max-width: 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        padding: 0;
        margin-top: 5vw;
    }
    #ENQUETE .btnlink {
        width: 100%;
        margin: 12vw auto 0;
    }
    
    #ENQUETE .subcopy {
        margin: 30px auto 0;
        text-align: justify;
        font-size: 1.4rem;
    }

}


/*--------------------------------
    コンタクト
--------------------------------*/

#CONTACT {
    width: 100vw;
    height: 70vw;
    margin: 0 auto;
    background: #BCD33E url(../images/bg_contact.png) no-repeat center top / 100% auto;
    position: relative;
    padding:11vw 0 8vw;
}

/*
#CONTACT .leftObj {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8999;
    display: block;
    width: 30%;
    pointer-events: none;
    -webkit-transform:translate(0, 0);
    transform:translate(0, 0);
    -webkit-transition: 0.6s;
    transition: 0.6s;
}

#CONTACT .rightObj {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 8999;
    display: block;
    width: 30%;
    pointer-events: none;
    -webkit-transform:translate(0, 0);
    transform:translate(0, 0);
    -webkit-transition: 0.6s;
    transition: 0.6s;
}

body.switch #CONTACT .leftObj {
    -webkit-transform:translate(-100%, 0);
    transform:translate(-100%, 0);
}

body.switch #CONTACT .rightObj {
    -webkit-transform:translate(100%, 0);
    transform:translate(100%, 0);
}
*/

#CONTACT .container {
    min-width: 0;
    max-width: none;
}

#CONTACT .baloon {
    width: 45%;
    padding: 20px;
    margin: 5vw auto 0;
    background-color: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    z-index: 2;

    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#CONTACT .baloon::before {
    content: '';
    display: block;
    width: 18px;
    height: 30px;
    background: transparent url(/virtual-exhibition/common/images/fukidashi.png) no-repeat center top / contain;
    position: absolute;
    top:100%;
    left: 50px;
}

#CONTACT .baloon::after {
    content: '';
    display: block;
    width: 4.5vw;
    height: 9.9vw;
    background: transparent url(../images/fig_p3.png) no-repeat center center / contain;
    position: absolute;
    top: 90%;
    left: -1vw;
}

#CONTACT .baloon p {
    margin: 0;
}

#CONTACT .btnlink {
    width: 40%;
    margin: 24vw auto 0;
}

#CONTACT .btnlink + .btnlink{
    margin: 2vw auto 0;
}

@media only screen and (max-width: 812px) {

    #CONTACT {
        height: auto;
        background: #BCD33E url(../images/bg_contact_sp.png) no-repeat center top / 100% auto;
        padding-top: 24vw;
        padding-bottom: 30vw;
    }

    #CONTACT .leftObj {
        display: none;
    }

    #CONTACT .rightObj {
        display: none;
    }

    #CONTACT .baloon {
        width: 100%;
        padding: 4vw;
        margin: 0 auto;
        font-size: 1.6rem;
    }

    #CONTACT .baloon::before {
        width: 9px;
        height: 15px;
        left: 12%;
    }

    #CONTACT .baloon::after {
        width: 11vw;
        height: 27vw;
        top:85%;
        left: -2vw;
    }

    #CONTACT .btnlink {
        width: 100%;
        margin: 32vw auto 0;
    }
    
    #CONTACT .btnlink + .btnlink{
        margin: 2vw auto 0;
    }

}


/*--------------------------------
    その他のOREC製品
--------------------------------*/

#ETC {
    width: 100vw;
    height: auto;
    padding:40px 0 80px;
    margin: 0 auto;
    background: #fff;
}

#ETC .btnlink {
    width: 40%;
    margin: 0 auto;
}

@media only screen and (max-width: 812px) {

    #ETC {
        padding:30px 0;
    }

    #ETC .btnlink {
        width: 90%;
    }
    
}