@charset "UTF-8";

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

HEADER_AREA

==================================================================*/
@media screen and (min-width:961px) {
.header_area{
width:700px;
margin:0 auto;
}
.header_area h1{
width:70%;
margin:15px auto 0;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.header_area{
width:80%;
margin:30px auto 0;
}
.header_area h1{
width:70%;
margin:15px auto 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.header_area{
width:98%;
margin:30px auto 50px;
}
.header_area h1{
width:90%;
margin:0 auto;
}
}









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

PROGRAMS_AREA

==================================================================*/
@media screen and (min-width:961px) {
.programs_area{
width:100%;
margin:30px auto 0px;
background:url("../../images/header_october_index_program.png") no-repeat right top;
background-size:contain;
padding:1px 0 0;
}
.programs_area h2{
display:none;
}
.programs_area div{
width:90%;
margin:120px 10% 0 0;
}
.programs_area ul{
}
.programs_area ul li{
width:100%;
margin:0 0% 60px;
}
.programs_area ul li h5 img{
box-shadow:3px 3px 6px #9FA09E;
}
.programs_area ul li h5#program01 img{
width:80%;
margin:0 10% 10px;
}
.programs_area ul li h5#program02 img{
width:60%;
margin:0 20% 10px;
}
.programs_area ul li h5#program03 img{
width:60%;
margin:0 20% 10px;
}
.programs_area ul li h5#program04 img{
width:80%;
margin:0 10% 10px;
}
.programs_area ul li h5#program05 img{
width:100%;
margin:0 0% 10px;
}
#program01,#program02,#program03,#program04,#program05{
margin-top:-50px;
padding-top:50px;
}
.programs_area ul li ol{
}
.programs_area ul li ol li{
font-size:0.8em;
float:left;
margin-right:0.5em;
color:#FFF;
width:auto;
margin:0 0.5em 0 0;
}
.programs_area ul li ol li span.activity{
background:#640125;
padding:0.1em 0.7em;
}
.programs_area ul li ol li span.event{
background:#2F5D50;
padding:0.1em 0.7em;
}
.programs_area ul li ol li span.exhibition{
background:#C89932;
padding:0.1em 0.7em;
}
.programs_area ul li ol li span.screening{
background:#2E2930;
padding:0.1em 0.7em;
}
.programs_area h4{
font-family:"Figtree", sans-serif;
font-style:italic;
font-weight:400;
font-size:1.2em;
margin-top:0.5em;
}
.programs_area h4 span{
font-size:0.8em;
margin:0 0.2em;
}
.programs_area h3{
font-size:18px;
font-weight:700;
line-height:1.3em;
margin:0.5em 0 0.5em;
}
.programs_area p{
font-size:13px;
line-height:1.3em;
margin:1.5em 0;
}
.programs_area dl{
}
.programs_area dl dt{
font-size:0.8em;
float:left;
width:4em;
background:#000;
color:#FFF;
padding:0.1em 1em;
margin-right:1em;
}
.programs_area .more{
width:16%;
height:auto;
margin:15px 0 0 84%;
}
.programs_area .more img{
position:relative;
left:0;
transition:0.8s;
}
.programs_area .more img:hover{
left:20px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.programs_area{
width:100%;
margin:30px auto 30px;
background:url("../../images/header_october_index_program.png") no-repeat right top;
background-size:contain;
padding:1px 0 0;
}
.programs_area h2{
display:none;
}
.programs_area div{
width:94%;
margin:80px 6% 0 0;
}
.programs_area ul{
}
.programs_area ul li{
width:80%;
margin:0 10% 50px;
}
.programs_area ul li h5 img{
box-shadow:3px 3px 6px #9FA09E;
}
.programs_area ul li h5#program01 img{
width:80%;
margin:0 10% 10px;
}
.programs_area ul li h5#program02 img{
width:70%;
margin:0 15% 10px;
}
.programs_area ul li h5#program03 img{
width:70%;
margin:0 15% 10px;
}
.programs_area ul li h5#program04 img{
width:80%;
margin:0 10% 10px;
}
.programs_area ul li h5#program05 img{
width:100%;
margin:0 0% 10px;
}
#program01,#program02,#program03,#program04,#program05{
margin-top:-35px;
padding-top:35px;
}
.programs_area ul li ol{
}
.programs_area ul li ol li{
font-size:0.8em;
float:left;
margin-right:0.5em;
color:#FFF;
width:auto;
margin:0 0.5em 0 0;
}
.programs_area ul li ol li span.activity{
background:#640125;
padding:0.1em 0.7em;
}
.programs_area ul li ol li span.event{
background:#2F5D50;
padding:0.1em 0.7em;
}
.programs_area ul li ol li span.exhibition{
background:#C89932;
padding:0.1em 0.7em;
}
.programs_area ul li ol li span.screening{
background:#2E2930;
padding:0.1em 0.7em;
}
.programs_area h4{
font-family:"Figtree", sans-serif;
font-style:italic;
font-weight:400;
font-size:1.2em;
margin-top:0.5em;
}
.programs_area h4 span{
font-size:0.8em;
margin:0 0.2em;
}
.programs_area h3{
font-size:18px;
font-weight:700;
line-height:1.3em;
margin:0.5em 0 0.5em;
}
.programs_area p{
font-size:13px;
line-height:1.3em;
margin:1.5em 0;
}
.programs_area dl{
}
.programs_area dl dt{
font-size:0.8em;
float:left;
width:4em;
background:#000;
color:#FFF;
padding:0.1em 1em;
margin-right:1em;
}
.programs_area .more{
width:20%;
height:auto;
margin:15px 0 0 80%;
}
.programs_area .more img{
position:relative;
left:0;
transition:0.8s;
}
.programs_area .more img:hover{
left:20px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.programs_area{
width:94%;
margin:40px auto　60px;
background:url("../../images/header_october_index_program.png") no-repeat right top;
background-size:130%;
padding:1px 0 0;
}
.programs_area h2{
display:none;
}
.programs_area div{
width:90%;
margin:80px 5% 0 5%;
}
.programs_area ul{
}
.programs_area ul li{
width:100%;
margin:0 0% 60px;
}
.programs_area ul li h5 img{
box-shadow:3px 3px 6px #9FA09E;
}
.programs_area ul li h5#program01 img{
width:96%;
margin:0 2% 10px;
}
.programs_area ul li h5#program02 img{
width:80%;
margin:0 10% 10px;
}
.programs_area ul li h5#program03 img{
width:80%;
margin:0 10% 10px;
}
.programs_area ul li h5#program04 img{
width:100%;
margin:0 0% 10px;
}
.programs_area ul li h5#program05 img{
width:100%;
margin:0 0% 10px;
}
#program01,#program02,#program03,#program04,#program05{
margin-top:-35px;
padding-top:35px;
}
.programs_area ul li ol{
}
.programs_area ul li ol li{
font-size:0.8em;
float:left;
margin-right:0.5em;
color:#FFF;
width:auto;
margin:0 0.5em 0 0;
}
.programs_area ul li ol li span.activity{
background:#640125;
padding:0.1em 0.7em;
}
.programs_area ul li ol li span.event{
background:#2F5D50;
padding:0.1em 0.7em;
}
.programs_area ul li ol li span.exhibition{
background:#C89932;
padding:0.1em 0.7em;
}
.programs_area ul li ol li span.screening{
background:#2E2930;
padding:0.1em 0.7em;
}
.programs_area h4{
font-family:"Figtree", sans-serif;
font-style:italic;
font-weight:400;
font-size:1.2em;
margin-top:0.5em;
}
.programs_area h4 span{
font-size:0.8em;
margin:0 0.2em;
}
.programs_area h3{
font-size:18px;
font-weight:700;
line-height:1.3em;
margin:0.5em 0 0.5em;
}
.programs_area p{
font-size:13px;
line-height:1.3em;
margin:1.5em 0;
}
.programs_area dl{
}
.programs_area dl dt{
font-size:0.8em;
float:left;
width:4em;
background:#000;
color:#FFF;
padding:0.1em 1em;
margin-right:1em;
}
.programs_area .more{
width:30%;
height:auto;
margin:15px 0 0 70%;
}
.programs_area .more img{
position:relative;
left:0;
transition:0.8s;
}
.programs_area .more img:hover{
left:20px;
}
}