body {
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Noto Serif JP', serif;
}
.wp960 {
    width: 95%;
    margin: auto;
    max-width: 960px;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.dt {
    display: block;
}
.sp {
    display: none ;
}
.relative {
    position: relative;
}
a {
    color: currentColor;
    text-decoration: none;
}
div#headerline {
    background: #f2f2f2;
    text-align: right;
    padding: 0px 0;
}
#headerline a {
    padding: 0.3em 0.5em;
    display: inline-block;
    font-size: 14px;
}
img {
    display: block;
    width: 100%;
    height: auto;
}
.backphoto{
	background-size: cover;
	background-position: center center;
}
div#footer {
    background: #f2f2f2;
    padding: 30px 0;
}

#pan .footer_rogo {
    width: 60%;
    padding: 0 0 10px;
    margin: auto;
    max-width: 300px;
}
#moritsuke .footer_rogo {
    width: 80%;
    margin: 0 auto 8px;
    max-width: 400px;
}
#footer a {
    margin: auto;
    display: block;
    width: 100%;
    text-align: center;
	font-size: 14px;
}
div#archive {
    background: #6a4d2e;
    padding: 50px 0;
}
#archive li {
    color: #FFF;
    font-size: 13px;
    width: 31.3333%;
    margin: 1%;
}

#archive li .photo {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center center;
}
@media screen and (max-width:768px) {
.wp960 {
    width: 90%;
}
.dt {
    display: none;
}
.sp {
    display: block;
}
.sp.flex {
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#archive li {
    color: #FFF;
    font-size: 13px;
    width: 48%;
    margin: 1%;
}
}