h1, h2, h3, h4, h5, h6, p, a{
    font-family: 'Shippori Mincho B1', serif;
}
/* clearfix **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.cf:after{ content:" "; display:block; clear:both; }


/* じわっと画像が表示される ---------　一度追加していたら不要*/
@keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
 
/*古いブラウザ用　---------　一度追加していたら不要*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
.loader {
    -webkit-transform: inherit;
    transform: inherit;
    -webkit-animation: inherit;
    animation: inherit;
    width: 185px;
    height: 41px;
    background: inherit;
    	/* じわっと画像が表示される */
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
    
}
.loader:before, .loader:after {
    content: inherit;
}
    
    
.museum .slides ul {
    overflow: hidden;
    margin: 0;
    padding: 0
}
.museum .slides ul li {
    list-style: none;
    float: left;
    width: 300px
}

@media screen and (max-width:767px) {
.museum .slides ul li {
    width: 250px
}
}
.museum .slides ul li > a {
    display: block;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: grayscale(100%);
    transition: all .3s ease;
    overflow: hidden
}
.museum .slides ul li > a:hover {
    filter: grayscale(0%)
}
.museum .slides ul li > a:hover .inner p {
    bottom: 0;
    opacity: 1
}
.museum .slides ul li > a:hover:after {
    background: rgba(255, 255, 255, 0)
}
.museum .slides ul li > a:before {
    content: "";
    display: block;
padding-top: calc(2 / 3 * 100%)
}
.museum .slides ul li > a:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    transition: all .3s ease
}
.museum .slides ul li > a .inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}
.museum .slides ul li > a .inner p {
    position: absolute;
    bottom: -2em;
    left: 0;
    width: 100%;
    margin: 0;
    padding: .5em;
    box-sizing: border-box;
    color: white;
/*    font: 400 13px/160% "Noto Sans Japanese", sans-serif;
    font: 400 1.3rem/160% "Noto Sans Japanese", sans-serif;*/
    text-align: center;
    background: black;
    opacity: 0;
    transition: all .3s ease
}
.museum .slides .simply-scroll-container {
    position: relative
}
.museum .slides .simply-scroll-clip {
    position: relative;
    overflow: hidden
}
.museum .btn-more {
    margin: 45px 0;
    text-align: center
}
    
    
    
footer {
    background-color: #000000;
    padding: 30px 0;
    font-size: 1.2rem;
    color: #ffffff
}
footer ul.copyright {
    list-style: none;
    margin-bottom: 0
}
footer ul.copyright li {
    display: inline-block;
    margin-right: 2em
}
footer ul.copyright li:last-child {
    margin-right: 0
}
footer a {
    color: #ffffff;
    text-decoration: none
}
footer a:hover {
    color: #ffffff;
    text-decoration: none
}
footer .sns {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px
}
footer .sns a img {
    height: 20px
}