@import url("news.css");
@import url("news_events.css");
@import url("research_highlights.css");
@import url("pickup.css");

#slider-outer {
	background:#ddd;
	background-size:38px 26px;
	border-bottom:solid 3px #0071c5;
    margin:0;
}
.slider-ja {
    border:none !important;
    background:none !important;
    margin-bottom:20px;
}
.ohp-slider .slider-prev {
    height:60px !important;
	left:3% !important;
}
.ohp-slider .slider-next {
    height:60px !important;
	right:3% !important;
}
.ohp-slider ul li {
	aspect-ratio:30 / 11;
}

section header h1 {
    font-size:3em;
    color:#fff;
}
section header a.more {
    display:inline-block;
    padding:10px 20px;
    border:solid 1px #fff;
    background:#fff;
    font-size:1.2em;
    color:#000;
    border-radius:4px;
    display:flex;
    align-items: center;
}
section header a.more:hover {
    background:#0071c5;
    color:#fff;
}

.index-content {
    margin:0;
}
.index-content article {
    margin:0 0 10px 0;
    flex:1;
}
.index-content article a {
    display:block;
    font-size:1.2em;
    position:relative;
    transition:0.4s;
}
.index-content article a img {
    object-fit: cover;
    aspect-ratio:3 / 2;
    width:100%;
    height:auto;
}

#index-admission {
    padding-top:40px;
    padding-bottom:40px;
}
#index-admission header h1 {
    color:#c92754;
    font-size:2.4em;
}
#index-admission header a.more {
    border:solid 1px #c92754;
    background:#c92754;
    color:#fff;
}
#index-admission header a.more:hover {
    background:#fff;
    color:#c92754;
}
#index-admission > div {
    padding:20px 40px;
    border:solid 1px #c92754;
    border-radius:4px;
}
#index-admission ul {
    padding:0;
    margin:0;
}
#index-admission ul li {
    padding:0;
    margin:0;
    line-height:1.4;
    font-size:1.2em;
    list-style:none;
}
#index-admission ul li span {
    font-weight:bold;
    padding:0 0 30px 0;
    display:inline-block;
    float:left;
}
#index-admission ul li a {
    padding:0 0 30px 0;
    display:block;
    margin-left:6em;
    color:#c92754;
}

#index-topics {
    background:#444;
    padding:40px 0;
}
.index-content article {
    counter-increment: gallery-cell;
    width:calc(1120px / 3);
    margin-right:20px;
}
.index-content article:last-of-type {
    margin-right:0;
}
.index-content article:hover {
    box-shadow:0 0 6px rgba(0,0,0,0.4);
}
.index-content article a .title {
    padding:10px 20px;
    color:#000;
    line-height:1.4;
    transition:0.4s;
    min-height:calc(4em + 30px);
    background:#fff;
}
.index-content article a .title span {
    display:block;
    font-weight:bold;
    color:#0071c5;
}
.index-content article a .title div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#index-news {
    background:#0071c5;
    padding:40px 0;
}

.flickity-prev-next-button.previous { left: -20px !important; }
.flickity-prev-next-button.next { right: -20px !important; }
.flickity-button { transition:0.4s; }
.flickity-button:disabled { opacity:0 !important; }

#index-event {
    background:#ddd;
    padding:40px 0;
}
#index-event header h1 {
    color:#000;
}
#index-event .index-event {
    margin:0;
    padding:0;
    font-size:1.2em;
    list-style:none;
}
#index-event .index-event li {
    padding:0;
    margin:0;
    line-height:1.4;
}
#index-event .index-event li span {
    font-weight:bold;
    padding:0 0 30px 0;
    display:inline-block;
    float:left;
}
#index-event .index-event li a {
    padding:0 0 30px 0;
    display:block;
    margin-left:6em;
}

#instagram {
    padding:40px 0;
}
#instagram h1 {
    text-align:center;
    padding-bottom:10px;
}
#instagram h1 img {
    max-width:500px;
}

#index-banner {
    padding:40px 0;
    background:#444;
}
#index-banner iframe {
    aspect-ratio:16 / 9;
    width:100%;
    max-width:800px;
    margin:0 auto;
    display:block;
}


@media only screen and (max-width : 1200px) {
    #index {
        padding:0;
    }
}

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

}

@media only screen and (max-width : 768px) {
	.ohp-slider div.caption div {
		padding:10px !important;
		font-size:1.4em !important;
	}
	.ohp-slider .slider-prev ,
	.ohp-slider .slider-next {
		display:none;
	}

    section header h1 {
        width:100%;
    }

    .index-content article {
        width:70%;
    }

    #index-admission > div {
        padding:20px;
    }
    #index-admission ul li span {
        display:block;
        float:none;
        padding-bottom:5px;
    }
    #index-admission ul li a {
        margin-left:0;
    }

    #index-event .index-event li span {
        display:block;
        float:none;
        padding-bottom:5px;
    }
    #index-event .index-event li a {
        margin-left:0;
    }
}

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

}