@charset "utf-8";

.pageTtlLegacy{
	width:45%;
	margin-left:auto;
	margin-right: auto;
}
@media(min-width: 768px){
	.pageTtlLegacy{
		width:70%;
		max-width:640px;
	}
}

footer {
    margin: 0 0 60px;
}
@media (min-width: 768px) {
    footer {
        margin: 0;
    }
}

.lnav01{
	width:90%;
	max-width:620px;
	margin:0 auto;
	display:flex;
	justify-content: space-between;
	align-items: stretch;
}
.lnav01 .btn{
	width:32%;
	max-width:190px;
	display:block;
	background-color:#222;
	color:#fff;
	font-size:clamp(1.2rem,1.8vw,1.8rem);
	padding:15px 0;
	outline: 1px solid #fff;
	outline-offset: -0.3em;
	text-decoration: none;
	position: relative;
	cursor: pointer;
}
.lnav01 .btn:before{
	content: "";
	position: absolute;
	right:0.8em;
	top:calc(50% - 4px);
	display: block;
	width:8px;
	height:8px;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	transform: rotate(45deg);
}
.lnav01 .btn.active{
	color:#222;
	background : linear-gradient(0deg, rgba(240, 238, 235, 1) 0%, rgba(234, 231, 227, 1) 0%, rgba(220, 216, 214, 1) 3.21%, rgba(182, 177, 179, 1) 9.35%, rgba(154, 149, 154, 1) 13.33%, rgba(249, 249, 249, 1) 52.25%, rgba(234, 235, 235, 1) 79.49%, rgba(220, 221, 221, 1) 100%);
	outline: 1px solid #222;
}
.lnav01 .btn.active:before{
	border-top:1px solid #222;
	border-right:1px solid #222;
}

.leTtl01{
	background-color: #dadada;
	text-align:right;
	padding:1em 3% 0;
	font-size:clamp(1.5rem,2vw,2rem);
	font-weight: normal;
}

.legAnime01{
	width:100%;
	height:50.5vw;
	max-height:505px;
	transition-duration: 1s;
    opacity:0;
}
.legAnime01.animated{
    opacity:1;
}
.legAnime01 figure {
    width:100%;
	overflow: hidden;
}
.legAnime01.animated figure {
    max-width: 100%;
    animation-name: legAnime01move;
    animation-fill-mode: forwards;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-direction: normal;
}

@keyframes legAnime01move {
    0% {
        clip-path: polygon(0% 0%, 90% 0%, 90% 90%, 0% 90%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

.legAnime01 img{
	transform-origin: top left;
	transition-duration: 1s;
	filter: blur(20px);
}
.legAnime01.animated img{
	filter: blur(0px);
}



.legacy01{
	width:100%;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display:flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	padding-top:40px;
	padding-bottom:clamp(60px,10vw,100px);
}
.legacy01 .txt01{
	font-size:clamp(4rem,6vw,6rem);
	text-align:left;
	line-height: 1.3;
	margin-left:0.3em;
}
.legacy01 .txt02{
	font-size:clamp(1.4rem,1.8vw,1.8rem);
	text-align:left;
	line-height: 2;
}


.legacy02{
	margin-bottom:40px;
	text-align:left;
}
.legacy02 .txtwrap{
	margin-bottom:20px;
}
@media(min-width: 768px){
	.legacy02{
		display:flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: row-reverse;
	}
	.legacy02 .txtwrap{
		width:33%;
		max-width:310px;
		text-align:left;
		margin-bottom:0;
	}
	.legacy02 .img01{
		width:64%;
		max-width:600px;
		text-align:left;
	}
}


.legacy03{
	margin-top:40px;
	margin-bottom:40px;
	text-align:left;
}
.legacy03 .txtwrap{
	margin-bottom:20px;
}
@media(min-width: 768px){
	.legacy03{
		display:flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top:0;
	}
	.legacy03 .txtwrap{
		width:58%;
		max-width:540px;
		text-align:left;
		margin-bottom:0;
	}
	.legacy03 .img01{
		width:40%;
		max-width:370px;
		text-align:left;
	}
}
/**/


/**/
.scene01.cClm3 > *{
	margin:0 0 20px 0;
}
@media(min-width: 768px){
	.scene01.cClm3 > *{
		width:33.3%;
		width:clamp(100% / 3);
		margin-bottom:40px;
	}
}

.scene02.cClm2{
	display:flex;
	justify-content: space-between;
}
.scene02.cClm2 > *{
	margin:0;
}
.scene02.cClm2 figure:nth-of-type(1){
	width:66%;
}
.scene02.cClm2 figure:nth-of-type(2){
	width:32.5%;
}
/**/


/**/

.future01.cClm2 .wrap02{
	background-color: #e6e6e6;
	padding:20px;
}
@media(min-width: 768px){
	.future01.cClm2{
		align-items: flex-end;
		justify-content: space-between;
	}
	.future01.cClm2 > *{
		margin:0;
	}
	.future01.cClm2 .wrap01{
		width:calc(530% / 9.4);
	}
	.future01.cClm2 .wrap02{
		width:calc(380% / 9.4);
	}
}



.future02{}
.future02 .unit{
	font-size:clamp(1.4rem,2vw,2rem);
	color:#113d71;
	border:1px solid #113d71;
	padding:0.5em;
	margin-bottom:10px;
}
.future02 .unit small{
	font-size:80%;
}
@media(min-width: 768px){
	.future02{
		display:flex;
		align-items: stretch;
		justify-content: space-between;
	}
	.future02 .unit{
		width:19%;
		font-size:clamp(1.5rem,2vw,2rem);
		line-height: 1.2;
		padding:15px 0;
		display:flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
}


.future03{
	margin-bottom:10vw;
}
.future03 .txt01{
	width:100%;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;

	margin-top:-30vw;
	margin-left: -5vw;
	font-size:clamp(3.2rem,6vw,6rem);
	text-align:left;
	line-height: 1.3;
}
@media(min-width: 768px){
	.future03{
		margin-bottom:min(8vw,80px);
	}
	.future03 .txt01{
		margin-top:max(-25vw,-250px);
		margin-left: max(-5vw,-50px);

	}
}


@media(min-width: 768px){
	.trajectory01.cClm2{
		display:flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.trajectory01.cClm2 > *{
		margin:0;
	}
	.trajectory01.cClm2 figure{
		width:60%;
		max-width:560px;
	}
	.trajectory01.cClm2 p{
		width:38%;
	}
}




/*タブ挙動*/
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}