@media screen and (max-width: 768px){
	#mecha{
		width: 100%;
	}
}


#mecha.sub__container .detail__desc.detail__names .detail__desc--in,
#mecha.sub__container .detail__desc.detail__visual .detail__desc--in{
	flex-basis: 100%;
	width: 100%;
} 

#mecha.sub__container .detail__desc--in:first-child{
	border-right: unset;
}

#mecha.sub__container .detail__subheadline{
	background-color: transparent;
}


.mecha__detail.--column-1 .detail__desc.detail__visual .detail__desc--in .detail__visual--img{
	width: 100%;
}
.mecha__detail.--column-1 .detail__desc.detail__visual .detail__desc--in .detail__visual--img img{
	margin: 0 auto;
}


@media screen and (max-width: 768px){
	.detail__visual {
		border-bottom: 1px solid #cccccc;
	}
	#mecha .detail__desc--in{
		border-bottom: unset;
	}
}


/** VISUAL CHANGE **/
.detail__visual{
	position: relative;
}
.changevisual{
	transition: .5s ease;
}
.visual2{
	position: absolute;
	top: 0;
	left: 0;
}


.detail_changeBtnWrap{
	margin-left: auto;
	position: relative;
    z-index: 10;
}
.detail_changeBtn{
	position: relative;
	display: block;
	color: #000;
}
.changeBtn_detailIn{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: auto;
	transition: .5s ease;
}
.changeBtn_detailIn:not(:first-child){
	position: absolute;
	top: 0;
	right: 0;
}
.detail_changeBtn_arrow{
	position: relative;
	width: min(6.6667vw, 80px);
	height: min(7.5vw, 90px);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: min(1.3334vw, 16px) min(0.6667vw, 8px);
	flex-shrink: 0;
	margin-right: min(2vw, 24px);
	transition: .5s ease;
}
.detail_changeBtn_arrow:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: url(../img/common/icon/icon_change_arrow.svg) no-repeat center / contain; */
	-webkit-mask:  url(../img/common/icon/icon_change_arrow.svg) no-repeat center / contain;
	mask:  url(../img/common/icon/icon_change_arrow.svg) no-repeat center / contain;
	background-color: #000;
	transition: .5s ease;
}
.detail_changeBtn_txt{
	font-size: min(1.3334vw, 16px);
	line-height: 1.6;
	display: block;
	word-break: break-all;
	width: 100%;
	text-align: center;
}

.detail_changeBtn_images{
	width: min(10.6667vw, 128px);
	background-color: #fff;
	position: relative;
	transition: background-color 0.5s ease;
}
.detail_changeBtn_images img{
	width: 100%;
	position: relative;
	z-index: 2;
}

.detail_changeBtn_images .chara__cover{
	transform: scale(-1, -1);
}


@media screen and (max-width: 768px){
	.detail_changeBtn_arrow{
		width: min(16vw, 60px);
		height: min(16vw, 60px);
		padding: min(2.1334vw, 16px) min(1.0667vw, 8px);
		margin-right: min(3.2vw, 24px);
	}
	.detail_changeBtn_txt{
		font-size: max(2.7vw, 10px);
	}
	.detail_changeBtn_images{
		width: max(17.3333333333vw, 65px);
	}
}


/** hover **/
.detail_changeBtn:hover .detail_changeBtn_arrow{
	color: #00a2c2;
}
.detail_changeBtn:hover .detail_changeBtn_arrow:before{
	transform: rotate(180deg);
	background-color: #00a2c2;
}
.detail_changeBtn:hover .detail_changeBtn_images,
.detail_changeBtn:hover .detail_changeBtn_images .chara__cover::before{
	background-color: #00a2c2;
}


/* CHANGED */

/* normal */
.visual2,
.btn2{
	opacity: 0;
}

/* active */
#detail__visual.--change .visual2,
#detail__visual.--change .btn2{
	opacity: 1;
}
#detail__visual.--change .visual1,
#detail__visual.--change .btn1{
	opacity: 0;
}

/*mecha taab*/
.mecha_tab {
	margin-top: 80px;
}
.tabBoxArea{
	position: relative;
}
.tabBox{
	opacity: 0;
	transition: opacity .6s;
}
.tabBox.is-active{
	opacity: 1;
}

.mecha_tab .sub__tab--item{
	width: 50%;

}
.fs_jp{
	display: inline!important;
	font-size: min(1.6vw, 20px)!important;
}
.is-active button .fs_jp{
	color: #fff!important;
}
@media screen and (max-width: 768px){
	.mecha_tab {
		margin-top: min(6.6666666667vw, 80px);
	}
	.sub__tab--item>button span {
		font-size:12px;
		padding: max(3.2vw, 16px) 10px;
	}
	.fs_jp{
		font-size:10px!important;
		padding: 0!important;
	}
}