/* common */
.SectionNewReactor{
padding-bottom: 120px;
overflow-x: hidden;
}
.SectionInner{
padding: 0 100px;
}
.SectionInner.newReactor{
padding-bottom: 100px;
}
.index_fig01 .ImgOnlyStyle{
border: 1px solid #666;
padding-top: 15px;
}
.index_fig01 .ImgOnlyStyle img{
max-width: 100%;
margin-bottom: 0;
vertical-align: bottom;
}
.index_fig01 .AnnotationsStyle1{
margin-bottom: 0;
}
.index_fig01 .AnnotationsStyle1 dt,
.index_fig01 .AnnotationsStyle1 dd{
white-space: nowrap;
}

@media screen and (max-width: 1200px){
.index_fig01{
padding-bottom: 50px;
}
}
@media screen and (max-width: 767px){
.SectionInner{
padding: 0;
}
.index_fig01{
padding-bottom: 0;
}
.index_fig01 .AnnotationsStyle1{
position: static;
}
}

/* index panel */
.ProductCategory{
font-size: 18.96px;
font-weight: bold;
margin-bottom: 5px;
}
.ProductName{
margin-bottom: 20px;
}
.ProductName,
.ProductName img{
transition: all 0.3s;
}
.ProductText1{
font-size: 15.8px;
margin-bottom: 10px;
}
.BtnMore{
text-align: left;
}
.BtnMore a{
font-size: 15.8px;
line-height: 20px;
color: #FFF;
color: #4C6FB7;
padding: 5px 10px 5px 20px;
transition: all .3s;
height: 20px;
display: block;
position: relative;
}
.BtnMore a::before{
width: 14px;
height: 20px;
display: block;
content: "";
background-image: url(../image/icon_index_link.png);
position: absolute;
top: 4px;
left: 0;
}


.BtnMore a:hover{
color: #6d9ad1;
}
/*
background-color: #4C6FB7;
background-color: #6d9ad1;
*/
.IndexPanlels{
width: 100%;
margin-top: 80px;
/*display: flex;
justify-content: space-between;*/
}
.IndexPanlels * {
box-sizing: border-box;
}
.IndexPanlels.Reverse{
flex-direction: row;}
.IndexPanlels.Reverse :nth-child(1){
order: 2;
}
.IndexPanlels.Reverse :nth-child(2){
order: 1;
}

.PanelImages{
position: relative;
width: 504px;
height: 296px;
margin: 0 0 0 auto;
}


.IndexPanlels.Row .PanelImages .BgImage{
background-color: #FFF;
/*margin: 0 auto 0 0;*/
margin: 0 0 0 auto;
height: 296px;
}
.IndexPanlels.Row.Active .PanelImages .BgImage{
background-color: #DDD;
animation: panelImage 0.5s ease-in forwards;
}
.IndexPanlels.Reverse .PanelImages .BgImage{
background-color: #FFF;
margin: 0 0 0 auto;
height: 296px;
}
.IndexPanlels.Reverse.Active .PanelImages .BgImage{
background-color: #DDD;
animation: panelImage 0.5s ease-in forwards;
}

.PanelImages .BgImage div{
overflow: hidden;
position: relative;
max-width: 504px;
height: 296px;
}
.PanelImages .BgImage div img{
width: 100%;
height: auto;
position: absolute;
display: block;
}
.IndexPanlels.Row .PanelImages .BgImage div img{
left: -504px;
}
.IndexPanlels.Row.Active .PanelImages .BgImage div img{
animation: panelImageRowImg 0.6s ease-in forwards;
animation-delay: 0.5s;
}
.IndexPanlels.Reverse .PanelImages .BgImage div img{
right: -504px;
}
.IndexPanlels.Reverse.Active .PanelImages .BgImage div img{
right: -504px;
animation: panelImageReverseImg 0.6s ease-in forwards;
animation-delay: 0.5s;
}
@keyframes panelImage{
0%{opacity: 0; width: 100%;}
100%{opacity: 1; width: 100%;}
/*0%{opacity: 0; width: 0;}
100%{opacity: 1;}*/
}
@keyframes panelImageRowImg{
0%{ left: -504px;}
100%{ left: 0;}
}
@keyframes panelImageReverseImg{
0%{ right: -504px;}
100%{ right: 0;}
}

/* ************************
ptroduct image 
************************ */
.PanelImages .ProductImage{
position: absolute;
z-index: 100;
pointer-events: none;
}
/* HI-ABWR ptroduct image */
.IndexPanlels.Row .PanelImages .ProductImage{
/*right:-120px;*/
left: -24%;
bottom: -80px;
opacity: 0;
}
.IndexPanlels.Row.Active .PanelImages .ProductImage{
/*right:-120px;*/
left: -24%;
bottom: -80px;
opacity: 0;
animation: ProductImageRow 0.6s ease-out forwards;
animation-delay: 1.2s;
}
@keyframes ProductImageRow{
0%{bottom: -80px; right:-120px; opacity: 0; filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(2);}
100%{bottom: -50px; right:-120px; opacity: 1; filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5)) brightness(1);}
}

/* BWRX-300 ptroduct image */
.IndexPanlels.Reverse .PanelImages .ProductImage{
left:-140px;
bottom: -120px;
opacity: 0;
}
.IndexPanlels.Reverse.Active .PanelImages .ProductImage{
left:-140px;
bottom: -120px;
opacity: 0;
animation: ProductImageReverse 0.6s ease-out forwards;
animation-delay: 0.8s;
}
@keyframes ProductImageReverse{
0%{right:-140px; bottom: -120px; opacity: 0; filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(2);}
100%{right:-140px; bottom: -80px; opacity: 1; filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5)) brightness(1);}
}




.PanelContent{
/*position: relative;
width: 504px;
max-height: 296px;*/
padding: 72px 0 0;
}
.PanelContentInner{
margin: 0 0 0 auto;
width: 504px;
/*
position: absolute;
width: 360px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
*/
}


@media screen and (max-width: 1310px){
.IndexPanlels.Row .PanelImages .ProductImage,
.IndexPanlels.Row.Active .PanelImages .ProductImage {
	left: -13%;
}
.ProductImage img{
width: 60%;
}
.IndexPanlels.Reverse .ProductImage img{
width: 50%;
}
}
@media screen and (max-width: 1253px){
.PanelImages .BgImage div img,
.JS #Contents .PanelImages .BgImage div img,
.JS .Contents .PanelImages .BgImage div img{
max-width: none;
width: auto;
height: 100%;
}

}
@media screen and (max-width: 1200px){
.PanelImages,
.PanelContent .PanelContentInner {
/*width: 50%;*/
width: 80%;
height: auto;
}
.PanelImages .BgImage div {
	max-width: 100%;
}
.IndexPanlels.Row .PanelImages .ProductImage,
.IndexPanlels.Row.Active .PanelImages .ProductImage {
	left: -25%;
}
/*.PanelContent{
text-align: center;
padding: 0 50px;
}*/
.PanelContentInner{
/*position: static;
width: auto;
transform: none;
text-align: left;*/
width: 75%;
}
}


/* index */
@media screen and (min-width: 1304px){
.IndexPanlels img{
max-width: 100%;
}
}
@media screen and (min-width: 995px) and (max-width: 1304px){
.OptionWideRWD .ColumnSet {
width: auto;
margin: 0 0; 
}
.OptionWideRWD .Grid4 .Column2{
width: 49%;
margin: 0 0 15px 2%;
padding: 0;
}
.OptionWideRWD .Grid4 .Column2.FirstItem{
margin: 0 0 15px 0;
}
}

@media screen and (min-width :995px) and (max-width: 1304px) {
.OptionWideRWD .index_fig01 .AnnotationsStyle1 dd {
white-space: normal;
}
}
@media screen and (max-width: 994px){
.JS .Grid4 .Column2 {
width: 49%;
margin: 0 0 15px 2%;
padding: 0;
}
.JS .Grid4 .Column2.FirstItem{
margin: 0 0 15px 0;
}
.index_fig01 .AnnotationsStyle1 dd {
white-space: normal;
}
}
@media screen and (max-width: 767px){
.OptionWideRWD .Grid4 .Column2,
.OptionWideRWD .Grid4 .Column2.Column2.FirstItem{
width: 100%;
margin: 0 0 25px 0;
padding: 0;
}
.index_fig01 .AnnotationsStyle1{
margin-bottom: 40px;
}
/*.PanelContent {
padding: 0 20px;
}*/

/*
.IndexPanlels.Row.Active .PanelImages .ProductImage img,
.IndexPanlels.Reverse.Active .PanelImages .ProductImage img{
width: 200px;
height: auto;}
.IndexPanlels.Row.Active .PanelImages .ProductImage{
right:auto;
left: 0;
bottom: -80px;
opacity: 0;
animation: ProductImageRowSP 0.6s ease-out forwards;
animation-delay: 1.2s;
pointer-events: none;
overflow: hidden;
}
.IndexPanlels.Reverse.Active .PanelImages .ProductImage{
right: auto;
left: 5px;
bottom: -90px;
opacity: 0;
animation: ProductImageReverseSP 0.6s ease-out forwards;
animation-delay: 0.8s;
pointer-events: none;
overflow: hidden;
}*/
@keyframes ProductImageRowSP{
0%{bottom: -80px; left: 0; opacity: 0; filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(2);}
100%{bottom: -50px; left: 0; opacity: 1; filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5)) brightness(1);}
}
@keyframes ProductImageReverseSP{
0%{left: 5px;bottom: -90px;opacity: 0;filter: drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(2);}
100%{left: 5px;bottom: -30px;opacity: 1;filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5)) brightness(1);}
}

}

@media screen and (max-width: 767px){
.SectionNewReactor,
.SectionInner.newReactor{
padding-bottom: 30px;
}
/*.IndexPanlels{
flex-direction: column;
gap: 20px;
overflow: hidden;
}
.IndexPanlels.Row{
flex-direction: column-reverse;
padding-bottom: 70px;
}
.IndexPanlels.Reverse{
flex-direction: column;
padding-bottom: 40px;
}
.PanelImages, .PanelContent{
width: 100%;
}
.PanelContent{
padding: 0;
}
*/

.PanelImages .BgImage div,
.IndexPanlels.Row .PanelImages .BgImage,
.IndexPanlels.Reverse .PanelImages .BgImage{
height: 230px;
overflow: hidden;
}
.JS #Contents .PanelImages .BgImage div,
.JS .Contents .PanelImages .BgImage div{
max-width: none;
}
.JS #Contents .PanelImages .BgImage div img,
.JS .Contents .PanelImages .BgImage div img{
width: 100%;
height: 100%;
object-fit: cover;
left: -100%;
}

.IndexPanlels.Row .PanelImages .ProductImage,
.IndexPanlels.Row.Active .PanelImages .ProductImage {
/*width: 150px;*/
	left: -25%;
}
.IndexPanlels.Row.Active .PanelImages .ProductImage img,
.IndexPanlels.Reverse.Active .PanelImages .ProductImage img{
width: 50%;
height: auto;
}
}

@media screen and (max-width: 414px){
	.PanelImages .BgImage div,
	.IndexPanlels.Row .PanelImages .BgImage,
	.IndexPanlels.Reverse .PanelImages .BgImage{
		height: 200px;
	}
	.PanelContent .PanelContentInner {
		width: 100%;
	}
}