@charset "UTF-8";
/* CSS Document */

#pageWrap {
	padding: 0px 0 0;
}
.notes-area {
    margin: 0% auto 0;
}
#sec01 {
	position: relative;
	container-type: inline-size;
}
#sec01 .mainEng {
	position: absolute;
	width: 60.3%;
  left: 18.5%;
  top: 5.4%;
	opacity: 0;
	filter: blur(20px);
	transform: scale(1.5);
transition: 1.5s 1s;
	
}
#sec01 .mainEng.active  {
	filter: blur(0px);
	transform: scale(1);
	opacity: 1;
}
#sec01 .names {
	position: absolute;
	width: 80%;
  left: 13.5%;
  bottom: 7.5%;
	z-index: 1;
	transition-delay: 1s;
}
#sec01 .flea {
	position: absolute;
	width: 30%;
  left: 77%;
  top: 73.5%;
}
#sec01 .flea2 {
  left: 46.2%;
  top: 76%;
}
#sec01 .flea3 {
  left: 31.6%;
  top: 67.7%;
}
#sec01 .flea4 {
  left: -1.4%;
  top: 65.2%;
}
#sec01 .h2Box {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 7%;
	color: #fff;
	width: 100%;
}
#sec01 .h2Box h2 {
	font-size:2.8cqw;
	font-size: clamp(50px, 2.8cqw, 60px);
	font-weight: 300;
	letter-spacing: 0.5em;
	padding-left: 0.5em;
	transition: 2s 2s;
}
#sec01 .h2Box h2.active {
	letter-spacing: 0.2em;

}
#sec01 .h2Box .lead {
	font-size:0.9cqw;
	font-size: clamp(13px, 0.9cqw, 16px);
	letter-spacing: 0.1em;
	padding: 2em 0;
	line-height: 6;
	transition: 1.5s 2.5s;
}
#sec01 .h2Box .lead.active {
	line-height: 3.4;
}
#sec01 .h3Box {
	position: absolute;
	z-index: 1;
	right: 3%;
	bottom: 45%;
	color: #fff;
	transition-delay: 4s;
}
#sec01 .h3Box h3 {
	text-align: right;
	font-size: clamp(18px, 2.1cqw, 30px);
	font-weight: 300;
	letter-spacing: 0.1em;
}
#sec01 .h3Box p {
	text-align: right;
	font-size: clamp(12px, 0.8cqw, 15px);
	line-height: 2.4;
	padding-top: 1em;
}

@media screen and (max-width: 959px){
	#sec01 .mainEng {
		width: 80%;
		left: 10%;
		top: 5.4%;
	}
	#sec01 .h2Box .lead.active {
    
	}
	#sec01 .h3Box {
		width: 90%;
		left: 5%;
	}
	#sec01 .h3Box h3 {
		text-align: center;
	}
	#sec01 .h3Box h3 br {
		display: none;
	}
	#sec01 .h3Box p {
		text-align: center;
	}
}
@media screen and (max-width: 599px){
	#sec01 .mainEng {
		transition: 1.5s 0s;
		width: 90%;
		left: 5%;
		top: 1%;
	}
	#sec01 .names {
		transition-delay: 0.5s;
	}
	#sec01 .h2Box h2.active {
		letter-spacing: 0.2em;
	}
	
	#sec01 .h2Box h2 {
    font-size: clamp(10px, 6.6cqw, 30px);
		transition-delay: 0.5s;
	}
	#sec01 .h2Box h2.active {
		letter-spacing: 0.1em;
	}
	#sec01 .h2Box .lead {
    font-size: 3.2cqw;
		line-height: 3;
		transition-delay: 1s;
	}
	#sec01 .h2Box .lead.active {
    line-height: 2;
}
	#sec01 .h3Box {
    bottom: 33%;
	}
	#sec01 .h3Box {
		transition-delay: 2s;
	}
	#sec01 .h3Box h3 {
		font-size: 3.6cqw;
	}
	#sec01 .h3Box p {
		font-size: 2.8cqw;
		line-height: 1.8;
	}
}

#sec02 {
	position: relative;
	background-color: #000;
	container-type: inline-size;
}
#sec02 .h3Box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	color: #fff;
}
#sec02 .h3Box h3 {
	font-size: clamp(18px, 2.1cqw, 30px);
	padding: 1em 0;
	letter-spacing: 0.2em;
}
#sec02 .h3Box p {
	font-size: clamp(13px, 0.9cqw, 16px);
	line-height: 2.4;
	letter-spacing: 0.1em;
}
#sec02 .flex {}
#sec02 .flex .itemWrap {
	width: calc(100% / 4);
	position: relative;
}
#sec02 .flex .item01 {
	transition-delay: 1s;
}
#sec02 .flex .item02 {
	transition-delay: 1.5s;
}
#sec02 .flex .item03 {
	transition-delay: 2s;
}
#sec02 .flex .item04 {
	transition-delay: 2.5s;
}
#sec02 .flex .itemWrap::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
background: #000000;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 1) 90%);
	z-index: 1;
}
#sec02 .flex .itemWrap .base {
	position: relative;
}
#sec02 .flex .itemWrap .itemBox {
	position: absolute;
	width: 90%;
	left: 5%;
	bottom: 5%;
	color: #fff;
	z-index: 2;
	container-type: inline-size;
}
#sec02 .flex .itemWrap .itemBox .imgBox {
	width: 80%;
	margin: 0 auto;
	transform: rotateY(-90deg);
	transition: 1s 2s;
}
#sec02 .flex .item02 .itemBox .imgBox {
	transition-delay: 2.5s;
}
#sec02 .flex .item03 .itemBox .imgBox {
	transition-delay: 3s;
}
#sec02 .flex .item04 .itemBox .imgBox {
	transition-delay: 3.5s;
}
#sec02 .flex .itemWrap.active .itemBox .imgBox {
	transform: rotateY(0deg);
}
#sec02 .flex .itemWrap .itemBox .engTxt {
	font-size: clamp(13px, 2cqw, 30px);
	font-size: 8cqw;
	padding: 0.5em 0 0;
	letter-spacing: 0em;
}
#sec02 .flex .itemWrap .itemBox .desc {
	font-size: clamp(12px, 0.7cqw, 14px);
	font-size: 4cqw;
}
#sec02 .flex .itemWrap .itemBox .name {
	font-size: clamp(12px, 0.8cqw, 16px);
	font-size: 5cqw;
	letter-spacing: 0em;
	border-bottom: #fff solid 1px;
	display: inline-block;
	padding: 1em 1em 0;
}
#sec02 .flex .itemWrap .itemBox .time {
	font-size: clamp(14px, 1.3cqw, 20px);
	font-size: 6cqw;
	line-height: 1.0;
	padding-top: 0.3em;
}
#sec02 .flex .itemWrap .itemBox .time span {
	font-size: 140%;
}
#sec02 .flex .itemWrap .itemBox .cap {
	font-size: 12px;
}
#sec02 .flex .itemWrap::after{
	content: "image";
	position: absolute;
	font-size: 10px;
	right: 0.4em;
	bottom: 0.4em;
	color: #fff;
	z-index: 1;
}
#sec02 .flex .item02::after{
	display: none;
}
.brtab {
	display: none;
}

@media screen and (max-width: 959px){
	.brtab {
	display: inline;
}
	#sec02 .h3Box {
		position: relative;
		top: 0;
		left: 5%;
		width: 90%;
		z-index: 2;
	}
	#sec02 .flex .itemWrap {
		width: calc(100% / 2);
	}
	#sec02 .flex .itemWrap::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 1) 100%);
	}
}
@media screen and (max-width: 599px){
	#sec02 .h3Box h3 {
		font-size: 4cqw;
		padding: 1em 0;
		letter-spacing: 0.2em;
		transition-delay: 0.5s;
	}
	#sec02 .h3Box p {
		font-size: 2.8cqw;
		line-height: 2.4;
		letter-spacing: 0.1em;
		transition-delay: 0.5s;
	}
	#sec02 .flex {
		width: 80%;
		margin: 0 auto;
	}
	#sec02 .flex .itemWrap {
		width: 100%;
		border-top: rgba(255,255,255,0.3) solid 1px;
	}
	#sec02 .flex .itemWrap:nth-child(1) {
		border-top: rgba(255,255,255,0) solid 1px;
	}
	#sec02 .flex .itemWrap .itemBox {
    width: 100%;
    left: 0%;
    bottom: 7%;
	}
	#sec02 .flex .item01,
	#sec02 .flex .item02,
	#sec02 .flex .item03,
	#sec02 .flex .item04{
		transition-delay: 0.3s;
	}
	#sec02 .flex .item01 .itemBox .imgBox,
	#sec02 .flex .item02 .itemBox .imgBox,
	#sec02 .flex .item03 .itemBox .imgBox,
	#sec02 .flex .item04 .itemBox .imgBox {
	transition-delay: 1.5s;
	}
	
	
}



#sec03 {
	background-color: #000;
	color: #fff;
	padding-top: 5%;
}
#sec03 .flex {
	align-items: flex-end;
}
#sec03 .flex .leftBox {
	width: 44%;
	text-align: left;
}
#sec03 .flex .leftBox h3 {
font-size: clamp(14px, 1.3cqw, 28px);
	border-top: #fff 1px solid;
	border-bottom: #fff 1px solid;
	width: 90%;
}
#sec03 .flex .leftBox dt {
font-size: clamp(14px, 1.0cqw, 20px);
	padding: 0.8em 0;
}
#sec03 .flex .leftBox dd {
font-size: 13px;
}
#sec03 .flex .rightBox {
	width: 55%;
}
#sec03 .gaikanBox {
	position: relative;
	padding-top: 8%;
	margin-bottom: -1px;
	
}
#sec03 .gaikanBox .gaikan {
	filter: blur(10px) grayscale(100%);
	transition: 2s 1s;
}
#sec03 .gaikanBox.active .gaikan {
	filter: blur(0px) grayscale(0%);
}
#sec03 .gaikanBox .eng {
	position: absolute;
	width: 40%;
	left: 5%;
	top:10%;
}
#sec03 .gaikanBox .eng .flea {
	position: absolute;
	width: 50%;
	right: 73.5%;
	bottom: 29%;
}
#sec03 .gaikanBox h4 {
	position: absolute;
	left: 5%;
	bottom:30%;
	font-size: clamp(14px, 2.6cqw, 48px);
	text-align: left;
	letter-spacing: 0.1em;
}

@media screen and (max-width: 959px){
	#sec03 .flex {
		max-width: 500px;
		margin: 0 auto;
	}
	#sec03 .flex .leftBox {
		width: 100%;
	}
	#sec03 .flex .leftBox h3 {
		width: 100%;
		text-align: center;
	font-size: clamp(14px, 1.3cqw, 28px);
		font-size:2.8cqw;
	}
	#sec03 .flex .leftBox dt {
	font-size: clamp(14px, 1.0cqw, 20px);
		font-size:2.4cqw;
		padding: 1em 0;
		text-align: center;
	}
	#sec03 .flex .leftBox dd {
	font-size: 13px;
		text-align: center;
		padding-bottom: 1em;
	}
	#sec03 .flex .rightBox {
		width: 100%;
	}
}
@media screen and (max-width: 599px){
	#sec03 .flex {
		width: 90%;
	margin: 0 auto;
		padding-top: 5%;
	}
	#sec03 .flex .leftBox h3 {
		font-size:4.8cqw;
	}
	#sec03 .flex .leftBox dt {
		font-size:3.8cqw;
	}
	#sec03 .flex .leftBox dd {
		font-size:2.8cqw;
	}
	#sec03 .gaikanBox .eng {
    position: absolute;
    width: 60%;
    left: 20%;
    top: 10%;
	}
	#sec03 .gaikanBox h4 {
    position: absolute;
		width: 100%;
    left: 0%;
    bottom: 52%;
    font-size: 4.6cqw;
    text-align: center;
    letter-spacing: 0.1em;
	}

}