@charset "UTF-8";
/*--------------------------------------------------------
モバイル用レイアウト（640px以下の解像度のスクリーン含む）
--------------------------------------------------------*/
@media only screen and (max-width : 768px) {
/* ----------------------------------------------------------------------------------------------------------------
contents
---------------------------------------------------------------------------------------------------------------- */
body { 
background-color: #000000;  
background-image: url("../img/bg_sp@2x.png");  
background-repeat: no-repeat; 
background-position: top center;
background-size: 100%;
}
html {
overflow-y: scroll;
overflow-x: hidden;
}
html, body {
width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img {
width: 100%;
height: auto;
}
#header-in,
#footer-in,
.section-in {
box-sizing: border-box;
width: 100%;
padding: 0 2em;
}
/*--------------------------------------------------------
hd
--------------------------------------------------------*/
header  {
margin-top: 6.5em;
text-align: center;
margin-bottom: 5em;
}
header h1 {
margin-bottom: 4em;
}
header h1 img {
width: 50%;
}
/*--------------------------------------------------------
ft
--------------------------------------------------------*/
footer {
border-top: solid 1px #262626;
padding: 2.5em 0;
background-color: #000000;
}
footer ul {
float: none;
margin: 0 auto 2em;
text-align: center;
}
footer ul li {
display: inline-block;
margin: 0 0.5em;
width: 13%;
}
footer ul li:nth-child(2) img {
margin-top:9%;
}
footer p {
float: none;
width: 70%;
margin: 2em auto 0;
}
/*--------------------------------------------------------
main
--------------------------------------------------------*/
/* info */
main section.info {
margin-bottom: 1em;
}
main section.info p.read {
font-size: 1.4rem;
padding: 0 0 3em;
text-align: left;
}
main section.info p.date {
font-size: 1.6rem;
padding: 0 0 3em;
}
main section.info p.venue {
padding: 0 0 3.5em;
}
main section .btn_l a {
width: 70%;
height: 0;
padding-top: 23.1%;
margin: 0 auto;
background-image: url("../img/btn01@2x.png");  
background-repeat: no-repeat; 
background-position: top center;
background-size: 100%;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

main section.info p {
padding: 0 1em 1.5em;
}
main section.info p.banner {
padding-bottom: 3.5em;
}
/* event */
main section.event {
margin-bottom: 5em;
}
main section.event p.read {
font-size: 1.4rem;
padding: 0 0 1em;
text-align: left;
}
main section.event li {
display:table-cell;
width: 33.3%;
background-color: rgba(255,255,255,0.9);
color: #000000;
}
main section.event li:nth-child(6) {
display: block;
background-image: url("../img/img_event06@2x.png");  
background-repeat: no-repeat; 
background-position: center center;
background-size: 60%;
}
main section.event li .caption {
padding: 1em 0.5em;
}
main section.event li .caption h3 {
font-size: 1.2rem;
margin-bottom: 0.5em;
font-weight: bold;
}
main section.event li .caption p {
font-size: 1.1rem;
text-align: left;
line-height: 1.3;
}
/* banner */
main section.banner .banner_sp {
display: block;
}
main section.banner .banner_sp  {
width: 100%;
height: 0;
/*高さ÷幅×100 */
padding-top: 127.24%;
display: block;
background-image: url("../img/banner_thefarm_sp@2x.png");  
background-repeat: no-repeat; 
background-position: top center;
background-size: 100%;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
main section.banner .banner_sp a:hover {
display: block;
background-image: url("../img/banner_thefarm_sp@2x.png");  
background-repeat: no-repeat; 
background-position: top center;
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha( opacity=100 )";
}

main section.banner .banner_pc {
display: none;
}




/* banner_snsnap */
main section.banner .banne_snsnapr_sp {
display: block;
}
main section.banner .banner_snsnap_sp {
width: 100%;
height: 0;
/*高さ÷幅×100 */
padding-top: 69.48%;
display: block;
background-image: url("../img/banner_snsnap_sp@2x.png");  
background-repeat: no-repeat; 
background-position: top center;
background-size: 100%;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
main section.banner .banner_snsnap_pc {
display: none;
}




main section.banner {
margin-bottom: 5em;
}
main section.banner p {
margin-bottom: 3em;
}
main section.banner .bannerbox {
width: 100%;
margin: 0 auto;
}
main section.banner .bannerbox a {
margin: 0 0;
}
main section.banner .bannerbox a:nth-child(1) {
float: left;
width: 29%;
margin: 0 2%;
}
main section.banner .bannerbox a:nth-child(2) {
float: left;
width: 29%;
margin: 0 2%;
}
main section.banner .bannerbox a:nth-child(3) {
float: left;
width: 29%;
margin: 0 2%;
}





/*--------------------------------------------------------
snsnap
--------------------------------------------------------*/
.snsnap h1 {
width: 100%;
height: 0;
/*高さ÷幅×100 */
padding-top: 15.69%;
display: block;
background-image: url("../img/title_snsnap_sp@2x.png");  
background-repeat: no-repeat; 
background-position: top center;
background-size: 100%;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
.snsnap ul {
margin-bottom: 1em;
}
.snsnap ul {
display: block;
background-color: #f5f5f5;
background-image: url("../img/img_snsnap_bg.png");
background-repeat: no-repeat;
background-position: right bottom;
background-size: 33.3%;
}
.snsnap li {
display: block;
float: left;
width: 33.3%;
}
.snsnap p {
font-size:1.2rem;
}


.movie-wrap {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}

.movie-wrap iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}


}
/*--------------------------------------------------------
モバイル用レイアウト（640px以下の解像度のスクリーン含む）
--------------------------------------------------------*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
body { 
background-color: #000000;  
background-image: url("../img/bg_sp@2x.png");  
background-repeat: no-repeat; 
background-position: 0 -120px;
background-size: 100%;
}
#header-in,
#footer-in,
.section-in {
box-sizing: border-box;
width: 100%;
padding: 0 4em;
}




.movie-wrap {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}

.movie-wrap iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
}