@charset "utf-8";

.section-area header {
color: #ffff00;
}

.header__wrapper {
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
height: 100%;
}
#header-area .fam {
width:25%;
margin-right: -3rem;
margin-bottom: 2rem;
}
#header-area .fam img.white {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.top-visual-area {
position: relative;
z-index: 0;
width: 100%;
height:100svh;
overflow: hidden;
padding: 0;
background: #ffff00;
}
.top-visual-area .mv {
width:100%;
height: 100svh;
position: absolute;
left:0;
top:0;
z-index: 0;
}

.top-visual-area .maininfo {
width: 100%;
height: 100%;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
z-index: 2;
}
.top-visual-area .maininfo .date {
position: absolute;
  top: 3rem;
  left: 0;
  width: 28%;
}
.top-visual-area .maininfo .fam {
display: none;
}
.top-visual-area .maininfo .infotitle {
position: absolute;
  bottom: 9rem;
  left: 3rem;
  width: 56%;
}

.top-visual-area .maininfo .photo-caption {
position: absolute;
bottom: 3rem;
left:3rem;
width: 100%;
font-size: 1.2em;
font-size: 1.2rem;
color: #111;
}
.top-visual-area .maininfo .photo-caption span {
background: #ffff00;
color: #111;
}
.top-visual-area .maininfo .photo-note {
 position: absolute;
bottom: 3rem;
left:3rem;
font-size: 1.2em;
font-size: 1.2rem;
color: #111;
}
.top-visual-area .mainphoto {
	overflow: hidden;
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100svh;
	z-index: 1;
}
.top-visual-area .mainphoto .photo {
	position: absolute;
	top: 0;
	bottom: 0;
	left:50%;
	transform: translateX(-50%);
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	z-index: 2;
	/*display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;	*/
}
.top-visual-area .mainphoto .photo img {
	width: auto;
	height: 130%;
}

.top-visual-area .mainphoto .triangle {
position: absolute;
top:-50%;
right:25%;
width: 55%;
z-index: 1;
}
.top-visual-area .mainphoto .ribbon {
position: absolute;
top:20%;
right:8%;
width: 28%;
z-index: 1;
}
.top-visual-area .mainphoto .eye {
position: absolute;
top:40%;
left:-27%;
width: 55%;
z-index: 1;
}



.top-info-area {
position: relative;
width: 100%;
}
.top-info-area .inner,
.top-goods-area .inner {
display: flex;
justify-content: space-between;
}
.top-info-area .container {
width: 55%;
}
.top-info-area .photo {
width: 45%;
display: grid;
grid-template-columns: 40% 60%;
}
.top-info-area .photo figure {
margin-bottom: 3rem;
}
.top-info-area .photo figure:nth-child(1) {
grid-row: 1 / 2;
grid-column: 1 / 3;
}
.top-info-area .photo figure:nth-child(1) img {
width:100%;
}
.top-info-area .photo figure:nth-child(2) {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.top-info-area .photo figure:nth-child(2) img {
width:55%;
margin-top: 8rem;
margin-left: 20%;
}
.top-info-area .photo figure:nth-child(3) {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
.top-info-area .photo figure:nth-child(3) img {
width:70%;
}

.top-info-area .text-area {
color: #ffffff;
}
.top-info-area .contents-nav {
width: 65%;
}

.top-goods-area {
position: relative;
width: 100%;
}
.top-goods-area .container {
width: 54%;
}
.top-goods-area .photo {
width: 40%;
}

.top-news-area {
position: relative;
width: 100%;
padding-bottom: 8rem;
}





#footer-area {
position: relative;
width: 100%;
height:100svh;
overflow: hidden;
padding: 0;
}
#footer-area .mv {
width:100%;
height: 100svh;
position: absolute;
left:0;
top:0;
z-index: 0;
}

#footer-area .maininfo {
width: 100%;
height: 100%;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
z-index: 2;
}
#footer-area .maininfo .date {
position: absolute;
  top: 3rem;
  left: 0;
  width: 28%;
}
#footer-area .maininfo .date img {
filter: invert(94%) sepia(61%) saturate(2553%) hue-rotate(1deg) brightness(106%) contrast(104%);
}
#footer-area .maininfo .infotitle {
position: absolute;
  bottom: 9rem;
  left: 3rem;
  width: 56%;
}
#footer-area .maininfo .fam {
display: none;
position: absolute;
bottom:3rem;
right:14%;
width: 6%;
}
#footer-area .maininfo .fam img {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}
#footer-area .maininfo .photo-caption {
position: absolute;
bottom: 3rem;
left:3rem;
width: 100%;
font-size: 1.2em;
font-size: 1.2rem;
color: #ffff00;
}
#footer-area .maininfo .photo-caption span {
background: #111;
color: #ffff00;
}
#footer-area .maininfo .photo-note {
 position: absolute;
bottom: 3rem;
left:3rem;
font-size: 1.2em;
font-size: 1.2rem;
color: #fff;
}
#footer-area .mainphoto {
	overflow: hidden;
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100svh;
	z-index: 1;
}
#footer-area .mainphoto .photo {
	position: absolute;
	top: 5%;
	bottom: 0;
	left:50%;
	transform: translateX(-50%);
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	z-index: 2;
	/*display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;	*/
}
#footer-area .mainphoto .photo img {
	width: auto;
	height: 100%;
}






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

#header-area .fam {
display: none;
}
.top-visual-area .mainphoto .triangle {
    top: -20%;
}
.top-visual-area .maininfo .date {
position:static;
margin: 2.5rem 0 2rem 0;
width:33%;
}
#footer-area .maininfo .date {
position:static;
margin: 2.5rem 0 2rem 0;
width:33%;
}
.top-visual-area .maininfo .fam {
display: block;
position:static;
width: 8%;
margin-left: 3rem;
}
#footer-area .maininfo .fam {
display: block;
position:static;
margin-left: 3rem;
}
.top-info-area .inner,
.top-goods-area .inner {
display: block;
}
.top-info-area .container {
    width: 100%;
}
.top-info-area .photo {
    width: 100%;
    grid-template-columns: 30% 70%;
    grid-template-rows: auto 1fr;
}
.top-info-area .photo figure {
    margin-bottom: 0;
}
.top-info-area .photo figure:nth-child(1) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.top-info-area .photo figure:nth-child(1) img {
    width: 80%;
    margin-left:20%;
}
.top-info-area .photo figure:nth-child(2) {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}
.top-info-area .photo figure:nth-child(2) img {
    width: 60%;
    margin-top: 5rem;
    margin-left: 10%;
}
.top-info-area .photo figure:nth-child(3) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.top-info-area .photo figure:nth-child(3) img {
    width: 50%;
    margin-left: 0;
}
.top-goods-area .photo {
    width: 100%;
}
.top-goods-area .container {
    width: 100%;
	margin-top: 3rem;
}
.top-news-area {
    padding-bottom: 0;
}
#footer-area .maininfo .infotitle {
    bottom: 9rem;
}
#footer-area .maininfo .photo-note {
right: 20%;
}


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

.top-visual-area,
.top-visual-area .mv,
.top-visual-area .mainphoto {
    height: 90svh;
}
.top-visual-area .mainphoto .photo {
    display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
	margin-top: 3rem;
}
.top-visual-area .mainphoto .photo img {
    height:78%;
    width: auto;
	margin-right: -3%;
}
.top-visual-area .maininfo {
padding-top: 100px;
}
.top-visual-area .maininfo .date {
margin: 0 0 2rem 0;
    width: 50%;
}
.top-visual-area .maininfo .fam {
position:static;
margin: 0 0 0 2rem;
width: 10%;
}
.top-visual-area .maininfo .infotitle {
    width: calc(100% - 3rem);
	bottom: 6.25rem;
    left: 1.5rem;
}
.top-visual-area .maininfo .photo-caption {
    width: calc(100% - 3rem);
	line-height: 1.5;
	left: 1.5rem;
	bottom: 1.5rem;
	font-size: 1.1em;
    font-size: 1.1rem;
}
.top-visual-area .mainphoto .eye {
    top: 50%;
    left: -45%;
    width: 100%;
}
.top-visual-area .mainphoto .ribbon {
    top: 15%;
    right:0;
    width: 40%;
}
.top-visual-area .mainphoto .triangle {
        top: -15%;
		right: 10%;
		width: 80%;
}
.top-info-area .photo figure:nth-child(2) img {
        width: 50%;
}
.top-info-area .photo figure:nth-child(1) img {
        width: 70%;
        margin-left: 30%;
}
#footer-area .maininfo .photo-note {
right: 1.5rem;
bottom: 1.5rem;
}
#footer-area .maininfo {
        padding-top: 0;
    }
#footer-area .maininfo .date {
        margin: 0 0 2rem 0;
        width: 50%;
}
#footer-area .maininfo .fam {
        position: static;
        margin: 0 0 0 2rem;
        width: 10%;
}
#footer-area .maininfo .infotitle {
        width: calc(100% - 3rem);
        bottom: 6rem;
        left: 1.5rem;
}
#footer-area .maininfo .photo-caption {
        width: calc(100% - 3rem);
        line-height: 1.5;
        left: 1.5rem;
        bottom: 1.5rem;
        font-size: 1.1em;
        font-size: 1.1rem;
}
#footer-area,
#footer-area .mv,
#footer-area .mainphoto {
        height: 95svh;
    }
#footer-area .mainphoto .photo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        margin-top: 3rem;
    }
#footer-area .mainphoto .photo img {
        height: 78%;
        width: auto;
    }
	
}
@media screen and (max-width: 768px) {


#footer-area .mainphoto .photo img {
        height: 85%;
}

}



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

#footer-area .mainphoto .photo {
    top: 0;
    left: 0;
    transform: translateX(0);
    width: 65%;
	margin-top: 0;
}
#footer-area .mainphoto .photo img {
        height: 90%;
}
#footer-area .maininfo .infotitle {
        bottom: 7rem;
}
#footer-area .maininfo .photo-caption {
        bottom: 2rem;

}
#footer-area .maininfo .photo-note {
right: auto;
left: 1.5rem;
bottom: 1rem;
}

}