@charset "UTF-8";

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

FV_AREA

==================================================================*/
@media screen and (min-width:961px) {
.fv_area{
width:64%;
margin:50px auto 0;
}
.fv{
width:100%;
margin:0 auto;
}
.fv h1{
width:60%;
margin:0 0 0 40%;
}
.fv div.fv_october_image{
margin:-20% 0 0 0;
padding-right:15%;
}
.fv h2{
width:85%;
margin:16px auto 0 0;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.fv_area{
width:80%;
margin:100px auto 0;
}
.fv{
width:100%;
margin:0 auto;
}
.fv h1{
width:60%;
margin:0 0 0 40%;
}
.fv div.fv_october_image{
margin:-20% 0 0 0;
padding-right:15%;
}
.fv h2{
width:85%;
margin:16px auto 0 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.fv_area{
width:100%;
margin:70px auto 0;
}
.fv{
width:100%;
margin:0 auto;
}
.fv h1{
width:70%;
margin:0 0 0 30%;
}
.fv div.fv_october_image{
margin:-22% 0 0 0;
padding-right:17%;
}
.fv h2{
width:83%;
margin:7px auto 0 0;
}
}









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

NEWS_AREA

==================================================================*/
@media screen and (min-width:961px) {
.news_area{
width:100%;
margin:80px auto 80px;
background:url("../../images/header_october_index_news.png") no-repeat right top;
background-size:contain;
}
.news_area h2{
display:none;
}
.news_area dl{
width:90%;
margin:50px 0;
padding-top:80px;
}
.news_area dl dt{
font-family:"Figtree", sans-serif;
font-style:italic;
font-weight:400;
font-size:16px;
margin-bottom:0.3em;
letter-spacing:0.05em;
}
.news_area dl dt span{
font-family:"Zen Kaku Gothic Antique", sans-serif;
font-weight:400;
font-style:normal;
font-size:0.7em;
margin-left:1em;
background:#F8B500;
padding:0.1em 1em;
border-radius:20px;
color:#000;
}
.news_area dl dd{
margin-bottom:1.3em;
line-height:1.3em;
}
.news_area .news_more{
width:16%;
height:auto;
margin:30px 0 0 80%;
}
.news_area .news_more img{
position:relative;
left:0;
transition:0.8s;
}
.news_area .news_more img:hover{
left:20px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.news_area{
width:100%;
margin:80px auto 60px;
background:url("../../images/header_october_index_news.png") no-repeat right top;
background-size:contain;
}
.news_area h2{
display:none;
}
.news_area dl{
width:90%;
margin:50px 0;
padding-top:70px;
}
.news_area dl dt{
font-family:"Figtree", sans-serif;
font-style:italic;
font-weight:400;
font-size:16px;
margin-bottom:0.3em;
letter-spacing:0.05em;
}
.news_area dl dt span{
font-family:"Zen Kaku Gothic Antique", sans-serif;
font-weight:400;
font-style:normal;
font-size:0.7em;
margin-left:1em;
background:#F8B500;
padding:0.1em 1em;
border-radius:20px;
color:#000;
}
.news_area dl dd{
margin-bottom:1em;
line-height:1.3em;
}
.news_area .news_more{
width:20%;
height:auto;
margin:30px 0 0 80%;
}
.news_area .news_more img{
position:relative;
left:0;
transition:0.8s;
}
.news_area .news_more img:hover{
left:20px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.news_area{
width:94%;
margin:40px auto;
background:url("../../images/header_october_index_news.png") no-repeat right top;
background-size:130%;
}
.news_area h2{
display:none;
}
.news_area dl{
width:90%;
margin:50px 0 0;
padding-top:60px;
}
.news_area dl dt{
font-family:"Figtree", sans-serif;
font-style:italic;
font-weight:400;
font-size:16px;
margin-bottom:0.2em;
letter-spacing:0.05em;
}
.news_area dl dt span{
font-family:"Zen Kaku Gothic Antique", sans-serif;
font-style:normal;
font-size:0.7em;
margin-left:1em;
background:#F8B500;
padding:0.1em 1em;
border-radius:20px;
color:#000;
}
.news_area dl dd{
margin-bottom:1.5em;
line-height:1.3em;
}
.news_area .news_more{
width:20%;
height:auto;
margin:20px 0 0 80%;
}
.news_area .news_more img{
position:relative;
left:0;
transition:0.8s;
}
.news_area .news_more img:hover{
left:20px;
}
}









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

ABOUT_AREA

==================================================================*/
@media screen and (min-width:961px) {
.about_area{
width:100%;
margin:80px auto 80px;
background:url("../../images/header_october_index_about.png") no-repeat right top;
background-size:contain;
}
.about_area h2{
display:none;
}
.about_area div.about{
width:90%;
margin:50px 0;
padding-top:80px;
}
.about_area h3{
font-family: "Zen Old Mincho", serif;
font-size:26px;
font-weight:700;
font-style:normal;
line-height:1.8em;
margin-bottom:0.5em;
transition:0.5s;
}
.about_area p{
font-size:18px;
font-weight:500;
font-style:normal;
line-height:1.8em;
margin-bottom:3em;
transition:0.5s;
}
.about div{
transition:1s;
opacity:0;
transform:translateY(20px);
display:block;
}
.about div:first-child{
animation:message 1.4s forwards 1s;　
}
.about div:nth-child(2){
animation:message 1.4s forwards 3.5s;
}
.about div:nth-child(3){
animation:message 1.4s forwards 6.5s;
}
.about div:nth-child(4){
animation:message 1.4s forwards 9s;
}
@keyframes message{
0%{
transform:translateY(20px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
.about div span{
font-family: "Zen Old Mincho", serif;
color:#000;
text-shadow:2px 2px rgba(248,181,0,0.7);
font-size:1.3em;
font-weight:700;
}
.effect{
display:none;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.about_area{
width:100%;
margin:80px auto 60px;
background:url("../../images/header_october_index_about.png") no-repeat right top;
background-size:contain;
}
.about_area h2{
display:none;
}
.about_area div.about{
width:90%;
margin:50px 0;
padding-top:80px;
}
.about_area h3{
font-family: "Zen Old Mincho", serif;
font-size:20px;
font-weight:700;
font-style:normal;
line-height:1.8em;
margin-bottom:0.5em;
transition:0.5s;
}
.about_area p{
font-size:16px;
font-weight:500;
font-style:normal;
line-height:1.8em;
margin-bottom:3em;
transition:0.5s;
}
.about div{
transition:1s;
opacity:0;
transform:translateY(20px);
display:block;
}
.about div:first-child{
animation:message 1.4s forwards 1s;　
}
.about div:nth-child(2){
animation:message 1.4s forwards 3.5s;
}
.about div:nth-child(3){
animation:message 1.4s forwards 6.5s;
}
.about div:nth-child(4){
animation:message 1.4s forwards 9s;
}
@keyframes message{
0%{
transform:translateY(20px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
.about div span{
font-family: "Zen Old Mincho", serif;
color:#000;
text-shadow:2px 2px rgba(248,181,0,0.7);
font-size:1.3em;
font-weight:700;
}
.effect{
display:none;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.about_area{
width:94%;
margin:40px auto;
background:url("../../images/header_october_index_about.png") no-repeat right top;
background-size:130%;
}
.about_area h2{
display:none;
}
.about_area div.about{
width:90%;
margin:50px 0;
padding-top:80px;
}
.about_area h3{
font-family: "Zen Old Mincho", serif;
font-size:22px;
font-weight:700;
font-style:normal;
line-height:1.5em;
margin-bottom:0.7em;
transition:0.5s;
}
.about_area p{
font-size:16px;
font-weight:500;
font-style:normal;
line-height:1.6em;
margin-bottom:4em;
transition:0.5s;
}
.about div{
transition:1s;
opacity:0;
transform:translateY(20px);
display:block;
}
.about div:first-child{
animation:message 1.4s forwards 1s;　
}
.about div:nth-child(2){
animation:message 1.4s forwards 3.5s;
}
.about div:nth-child(3){
animation:message 1.4s forwards 6.5s;
}
.about div:nth-child(4){
animation:message 1.4s forwards 9s;
}
@keyframes message{
0%{
transform:translateY(20px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
.about div span{
font-family: "Zen Old Mincho", serif;
color:#000;
text-shadow:2px 2px rgba(248,181,0,0.7);
font-size:1.3em;
font-weight:700;
}
.effect{
display:none;
}
}









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

PROGRAM_AREA

==================================================================*/
@media screen and (min-width:961px) {
.program_area{
width:100%;
margin:80px auto 80px;
background:url("../../images/header_october_index_program.png") no-repeat right top;
background-size:contain;
padding:1px 0 0;
}
.program_area h2{
display:none;
}
.program{
width:90%;
margin:100px 10% 0 0;
}
.swiper{
margin:70px 0;
}
.program a{
text-decoration:none;
}
.program .slide-content{
padding:1em 0 0;
}
.program .slide-content ul{
}
.program .slide-content ul li{
font-size:0.8em;
float:left;
margin-right:0.5em;
color:#FFF;
}
.program .slide-content ul li span.activity{
background:#640125;
padding:0.1em 0.7em;
}
.program .slide-content ul li span.event{
background:#2F5D50;
padding:0.1em 0.7em;
}
.program .slide-content ul li span.exhibition{
background:#C89932;
padding:0.1em 0.7em;
}
.program .slide-content ul li span.screening{
background:#2E2930;
padding:0.1em 0.7em;
}
.program .slide-content p{
font-family:"Figtree", sans-serif;
font-style:italic;
font-weight:400;
font-size:1.2em;
margin-top:0.3em;
}
.program .slide-content p span{
font-size:0.8em;
margin:0 0.2em;
}
.program .slide-content h3{
font-size:18px;
font-weight:700;
line-height:1.3em;
margin:0.3em 0 0.5em;
}
.program .slide-content dl{
}
.program .slide-content dl dt{
font-size:0.8em;
float:left;
width:4em;
background:#000;
color:#FFF;
padding:0.1em 1em;
margin-right:1em;
}
.program .swiper{
position:relative;
overflow:hidden;
}
.program .swiper .swiper-button-next,.program .swiper .swiper-button-prev{
background-color:#F8B500;
border-radius:50%;
width:40px;
height:40px;
}
.program .swiper .swiper-button-next::after, .program .swiper .swiper-button-prev::after{
font-family:'Font Awesome 5 Free';
font-weight:600;
color:#000;
font-size:1rem;
}
.program .swiper .swiper-button-next::after{
content:'\f054';
}
.program .swiper .swiper-button-prev::after{
content:'\f053';
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.program_area{
width:100%;
margin:80px auto 60px;
background:url("../../images/header_october_index_program.png") no-repeat right top;
background-size:contain;
padding:1px 0 0;
}
.program_area h2{
display:none;
}
.program{
width:94%;
margin:60px 6% 0 0;
}
.swiper{
margin:50px 0;
}
.program a{
text-decoration:none;
}
.program .slide-content{
padding:1em 0 0;
}
.program .slide-content ul{
}
.program .slide-content ul li{
font-size:0.8em;
float:left;
margin-right:0.5em;
color:#FFF;
}
.program .slide-content ul li span.activity{
background:#640125;
padding:0.1em 0.7em;
}
.program .slide-content ul li span.event{
background:#2F5D50;
padding:0.1em 0.7em;
}
.program .slide-content ul li span.exhibition{
background:#C89932;
padding:0.1em 0.7em;
}
.program .slide-content ul li span.screening{
background:#2E2930;
padding:0.1em 0.7em;
}
.program .slide-content p{
font-family:"Figtree", sans-serif;
font-style:italic;
font-weight:400;
font-size:1em;
margin-top:0.3em;
}
.program .slide-content p span{
font-size:0.8em;
margin:0 0.2em;
}
.program .slide-content h3{
font-size:16px;
font-weight:700;
line-height:1.3em;
margin:0.3em 0 0.5em;
}
.program .slide-content dl{
}
.program .slide-content dl dt{
font-size:0.8em;
float:left;
width:4em;
background:#000;
color:#FFF;
padding:0.1em 1em;
margin-right:1em;
}
.program .swiper{
position:relative;
overflow:hidden;
}
.program .swiper .swiper-button-next,.program .swiper .swiper-button-prev{
background-color:#F8B500;
border-radius:50%;
width:40px;
height:40px;
}
.program .swiper .swiper-button-next::after, .program .swiper .swiper-button-prev::after{
font-family:'Font Awesome 5 Free';
font-weight:600;
color:#000;
font-size:1rem;
}
.program .swiper .swiper-button-next::after{
content:'\f054';
}
.program .swiper .swiper-button-prev::after{
content:'\f053';
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.program_area{
width:100%;
margin:60px auto;
background:url("../../images/header_october_index_program.png") no-repeat right top;
background-size:130%;
padding:1px 0 0;
}
.program_area h2{
display:none;
}
.program{
width:80%;
margin:50px 10% 0 10%;
}
.swiper{
margin:50px 0;
}
.program a{
text-decoration:none;
}
.program .slide-content{
padding:1em 0 0;
}
.program .slide-content ul{
}
.program .slide-content ul li{
font-size:0.8em;
float:left;
margin-right:0.5em;
color:#FFF;
}
.program .slide-content ul li span.activity{
background:#640125;
padding:0.1em 0.7em;
}
.program .slide-content ul li span.event{
background:#2F5D50;
padding:0.1em 0.7em;
}
.program .slide-content ul li span.exhibition{
background:#C89932;
padding:0.1em 0.7em;
}
.program .slide-content ul li span.screening{
background:#2E2930;
padding:0.1em 0.7em;
}
.program .slide-content p{
font-family:"Figtree", sans-serif;
font-style:italic;
font-weight:400;
font-size:1em;
margin-top:0.3em;
}
.program .slide-content p span{
font-size:0.8em;
margin:0 0.2em;
}
.program .slide-content h3{
font-size:16px;
font-weight:700;
line-height:1.3em;
margin:0.3em 0 0.5em;
}
.program .slide-content dl{
}
.program .slide-content dl dt{
font-size:0.8em;
float:left;
width:4em;
background:#000;
color:#FFF;
padding:0.1em 1em;
margin-right:1em;
}
.program .swiper{
position:relative;
overflow:hidden;
}
.program .swiper .swiper-button-next,.program .swiper .swiper-button-prev{
background-color:#F8B500;
border-radius:50%;
width:40px;
height:40px;
}
.program .swiper .swiper-button-next::after, .program .swiper .swiper-button-prev::after{
font-family:'Font Awesome 5 Free';
font-weight:600;
color:#000;
font-size:1rem;
}
.program .swiper .swiper-button-next::after{
content:'\f054';
}
.program .swiper .swiper-button-prev::after{
content:'\f053';
}
}








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

RESEARCHER_AREA

==================================================================*/
@media screen and (min-width:961px) {
.researcher_area{
width:100%;
margin:80px auto 80px;
background:url("../../images/header_october_index_resercher.png") no-repeat right top;
background-size:contain;
padding:1px 0 0;
}
.researcher_area h2{
display:none;
}
.researcher{
width:90%;
margin:100px 10% 0 0;
}
.swiper{
margin:70px 0;
}
.researcher a{
text-decoration:none;
}
.researcher .slide-content{
padding:1em 0 0;
}
.researcher .slide-content ul{
}
.researcher .slide-content ul li{
font-size:0.8em;
float:left;
margin-right:0.5em;
color:#FFF;
}
.researcher .slide-content p{
font-size:0.8em;
color:#000;
text-align:center;
}
.researcher .slide-content p span{
background:#F8B500;
padding:0.1em 0.7em;
}
.researcher .slide-content h3{
font-size:24px;
font-weight:700;
line-height:1.3em;
margin:0.1em 0 0.5em;
word-spacing:0.1em;
letter-spacing:0.05em;
text-align:center;
}
.researcher .slide-content h4{
font-size:0.8em;
font-weight:700;
text-align:center;
}
.researcher .swiper{
position:relative;
overflow:hidden;
}
.researcher .swiper .swiper-button-next,.researcher .swiper .swiper-button-prev{
background-color:#F8B500;
border-radius:50%;
width:40px;
height:40px;
}
.researcher .swiper .swiper-button-next::after, .researcher .swiper .swiper-button-prev::after{
font-family:'Font Awesome 5 Free';
font-weight:600;
color:#000;
font-size:1rem;
}
.researcher .swiper .swiper-button-next::after{
content:'\f054';
}
.researcher .swiper .swiper-button-prev::after{
content:'\f053';
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.researcher_area{
width:100%;
margin:80px auto 60px;
background:url("../../images/header_october_index_resercher.png") no-repeat right top;
background-size:contain;
padding:1px 0 0;
}
.researcher_area h2{
display:none;
}
.researcher{
width:94%;
margin:60px 6% 0 0;
}
.swiper{
margin:50px 0;
}
.researcher a{
text-decoration:none;
}
.researcher .slide-content{
padding:1em 0 0;
}
.researcher .slide-content p{
font-size:0.8em;
color:#FFF;
text-align:center;
}
.researcher .slide-content p span{
background:#F8B500;
padding:0.1em 0.7em;
}
.researcher .slide-content h3{
font-size:20px;
font-weight:700;
line-height:1.3em;
margin:0.1em 0 0.5em;
word-spacing:0.1em;
letter-spacing:0.05em;
text-align:center;
}
.researcher .slide-content h4{
font-size:0.8em;
font-weight:700;
text-align:center;
}
.researcher .swiper{
position:relative;
overflow:hidden;
}
.researcher .swiper .swiper-button-next,.researcher .swiper .swiper-button-prev{
background-color:#F8B500;
border-radius:50%;
width:40px;
height:40px;
}
.researcher .swiper .swiper-button-next::after, .researcher .swiper .swiper-button-prev::after{
font-family:'Font Awesome 5 Free';
font-weight:600;
color:#000;
font-size:1rem;
}
.researcher .swiper .swiper-button-next::after{
content:'\f054';
}
.researcher .swiper .swiper-button-prev::after{
content:'\f053';
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.researcher_area{
width:100%;
margin:60px auto 30px;
background:url("../../images/header_october_index_resercher.png") no-repeat right top;
background-size:130%;
padding:1px 0 0;
}
.researcher_area h2{
display:none;
}
.researcher{
width:80%;
margin:50px 10% 0 10%;
}
.swiper{
margin:50px 0;
}
.researcher a{
text-decoration:none;
}
.researcher .slide-content{
padding:1em 0 0;
}
.researcher .slide-content p{
font-size:0.8em;
color:#FFF;
text-align:center;
}
.researcher .slide-content p span{
background:#F8B500;
padding:0.1em 0.7em;
}
.researcher .slide-content h3{
font-size:20px;
font-weight:700;
line-height:1.3em;
margin:0.3em 0 0.5em;
word-spacing:0.1em;
letter-spacing:0.05em;
text-align:center;
}
.researcher .slide-content h4{
font-size:0.8em;
font-weight:700;
text-align:center;
line-height:1.3em;
}
.researcher .swiper{
position:relative;
overflow:hidden;
}
.researcher .swiper .swiper-button-next,.researcher .swiper .swiper-button-prev{
background-color:#F8B500;
border-radius:50%;
width:40px;
height:40px;
}
.researcher .swiper .swiper-button-next::after, .researcher .swiper .swiper-button-prev::after{
font-family:'Font Awesome 5 Free';
font-weight:600;
color:#000;
font-size:1rem;
}
.researcher .swiper .swiper-button-next::after{
content:'\f054';
}
.researcher .swiper .swiper-button-prev::after{
content:'\f053';
}
}









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

LETTER_AREA

==================================================================*/
@media screen and (min-width:961px) {
.letter{
width:100%;
margin:0 auto 130px;
}
.letter a{
display:block;
transition:all .3s ease-in-out;
overflow:hidden;
}
.letter img{
box-shadow:1px 1px 10px #BBB;
width:100%;
vertical-align:middle;
}
.letter a:hover{
border-radius:20px;
}
}
@media only screen and (min-width:768px) and (max-width:960px) {
.letter{
width:100%;
margin:0 auto 100px;
}
.letter a{
display:block;
transition:all .3s ease-in-out;
overflow:hidden;
}
.letter img{
box-shadow:1px 1px 10px #BBB;
width:100%;
vertical-align:middle;
}
.letter a:hover{
border-radius:20px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.letter{
width:94%;
margin:0 auto 70px;
}
.letter a{
display:block;
transition:all .3s ease-in-out;
overflow:hidden;
}
.letter img{
box-shadow:1px 1px 10px #BBB;
width:100%;
vertical-align:middle;
}
.letter a:hover{
border-radius:20px;
}
}