@charset "utf-8";

body {
background: #ffff00;
}

#header-area {
width: 100%;
height: auto;
justify-content: flex-start;
align-items: flex-start;
padding: 3.25rem;
position: absolute;
}
#header__logo {
    order: 1;
	padding: 0;
	margin-right: 3rem;
}
.header__date {
    order: 2;
	margin-right: auto;
}
.header__wrapper {
    order: 3;
	padding: 0;
	position: fixed;
	top:3.25rem;
	right: 3.25rem;
}
#header__logo img,
.header__date img {
    width: auto;
    height: 100px;
}
.nav .nav__wrapper {
    margin-right: 0;
}



.article-area {
color: #000;
}








#footer-area {
width: 100%;
background: #000;
padding: 4rem 4% 4rem 4%;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#footer-area div {
display: flex;
}
#footer-area .ft-logo {
margin-right: 2rem;
}
#footer-area .ft-logo img {
height: 100px;
width: auto;
filter: invert(94%) sepia(61%) saturate(2553%) hue-rotate(1deg) brightness(106%) contrast(104%);
}
#footer-area .date {
height: 100px;
width: auto;
}
#footer-area .date img {
height: 100px;
width: auto;
filter: invert(94%) sepia(61%) saturate(2553%) hue-rotate(1deg) brightness(106%) contrast(104%);
}

#footer-area .fam {
}
#footer-area .fam img {
height: 100px;
width: auto;
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}
#footer-area .photo-note {
font-size: 1.2em;
font-size: 1.2rem;
line-height: 1;
color: #fff;
text-align: right;
margin-left: auto;
margin-right: 2rem;
}

@media screen and (min-width: 1920px) {
main {
position: relative;
top:0;
left: 10%;
width: 80%;
}
.contents-area .article-area {
    padding: 32rem 7% 8rem 7%;
}
}
@media screen and (max-width: 1024px) {

.contents-area .article-area {
    padding: 32rem 23% 8rem 7%;
}

}
@media screen and (max-width: 840px) {

#header-area {
    padding: 0.75rem;
}
#header__logo {
    margin-right: 0.75rem;
}
.header__date {
display: none;
}
#header__logo img,
.header__date img {
    width: auto;
        height: 72.5px;
}
.contents-area .article-area {
    padding: 100px 7% 6rem 7%;
}
#footer-area {
flex-direction: column;
align-items: center;
padding: 4rem 7% 4rem 7%;
}
#footer-area .ft-logo {
    margin-right: 1rem;
	width: 70%;
}
#footer-area .date {
height: auto;
	width: 30%;
}
#footer-area .ft-logo img,
#footer-area .date img,
#footer-area .fam img {
    height: auto;
    width: 100%;
}
#footer-area div {
order: 1;
}
#footer-area .fam {
width: 15%;
margin: 3rem auto 0 auto;
text-align: center;
order: 2;
}
#footer-area .photo-note {
order: 3;
text-align: center;
margin-top:3rem;
margin-left: auto;
margin-right: auto;
}

}
@media screen and (max-width: 768px) {



}



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




}