@charset "UTF-8";

.CatchCopyBWRX-300 strong{
color: #6D6E71;
}
/* *****************
movie area
***************** */
.ARMovieList{
text-align: center;
min-height: 277px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: all .3s;
}
.ARMovieList ul{
margin: 0 auto;
display: flex;
justify-content: center;
width: 90%;
}
.ARMovieList ul li{
margin-bottom: 20px;
}
.ARMovieList ul li a,
.ARMovieList ul li span{
display: block;
}
.ARMovieList ul li a{
margin-bottom: 5px;
position: relative;
}
.ARMovieList ul li a img{
width: 100%;
}
a.ModalYouTubeLink,
a.ModalYouTubeLink span img{
width: 100%;
transition: all .3s;
}
a.ModalYouTubeLink:hover span img{
opacity: 0.7;
}

/* *****************
play movie icon
***************** */
/*circle*/
a.ModalYouTubeLink::after {
content: "";
position: absolute;
z-index: 1;
width: 36px;
height: 36px;
top: 50%;
left: 50%;
margin: -18px 0 0 -18px;
background-color: #008188;
border-radius: 50%;
}
/*tri*/
a.ModalYouTubeLink span::after {
content: "";
position: absolute;
z-index: 2;
width: 0;
height: 0;
top: 50%;
left: 50%;
margin: -9px 0 0 -3px;
border-left: solid 9px #fff;
border-top: solid 9px transparent;
border-bottom: solid 9px transparent;
}
/* icon hover */
.PC a.ModalYouTubeLink:hover::after,
.PC a.ModalYouTubeLink:active::after{
background-color: #005e60;
}

/* *****************
modal box
***************** */
/*.ModalBox {
width: 100%;
display: none;
margin-top: 30px
}*/
/* modal close button*/
/*.ModalBox .BtnClose{
position: absolute;
top: -8px;
right: 0;
width: 26px;
height: 26px;
border-radius: 3px;
color: #fff;
background-color: #3a72b8;
text-decoration: none;
cursor: pointer;
transition: all 0.3s;
}
.ModalBox .BtnClose:hover{
color: #fff;
background-color: #05729f;
text-decoration: none;
}
.ModalBox .BtnClose::before,
.ModalBox .BtnClose::after{
content: "";
width: 20px;
height: 2px;
display: block;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
}
.ModalBox .BtnClose::before{
transform: translate(-50%, -50%) rotate(-45deg);
}
.ModalBox .BtnClose::after{
transform: translate(-50%, -50%) rotate(45deg);
}
.ModalBox .BtnClose:hover{
background-color: #6d9ad1;
}*/

/* *****************
Down Load List
***************** */
.DownloadList{
display: flex;
justify-content: right;
flex-wrap: nowrap;
align-items: center;
}
.DownloadList dt{
font-size: 20px;
line-height: 1em;
position: relative;
padding: 5px 10px 5px 20px;
margin-right: 20px;
color: #005e60;
}
.DownloadList dt::before{
width: 14px;
height: 20px;
display: block;
content: "";
background-image: url(../../image/icon_index_link.png);
position: absolute;
top: 4px;
left: 0;
}
.DownloadList .Thumbnail{
border: 1px solid #999;
display: inline-block;
transition: all 0.3s;
width: 86px;
height: 120px;
position: relative;
overflow: hidden;
}
.DownloadList .Thumbnail img{
margin-bottom: 0;
vertical-align: bottom;
transition: all 0.3s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(1,1);
}
.DownloadList .FileSize{
font-size: 14.8px;
margin-left: 15px;
color: #333;
transition: all 0.3s;
}
.DownloadList dd ul li a{
display: flex;
justify-content: left;
align-items: flex-end;
}
.DownloadList dd ul li a:hover .Thumbnail{
border-color: #005e60;
}
.DownloadList dd ul li a:hover .Thumbnail img{
opacity: 0.8;
transform: translate(-50%,-50%) scale(1.2,1.2);
}
.DownloadList dd ul li a:hover .FileSize{
color: #005e60;
}
@media screen and (max-width: 767px){
.ARMovieList ul{
width: 100%;
}
}

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

}

/* *****************
bwrx-300_project
***************** */
.bwrx-300_project{
width: 100%;
position: relative;
min-height: 420px;
display: block;
}
.projectMap .locationBtns{
width: 538px;
min-height: 420px;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 100;
pointer-events: none;
}
.projectMap .mapImg{
width: 538px;
transition: all 0.8s;
position: absolute;
left: 50%;
transform: translateX(-50%) scale(1);
}
.projectMap .CN-Ontario,
.projectMap .CN-Saskatchewan,
.projectMap .US-ClinchRiver{
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #3a72b8;
z-index: 100;
}
.projectMap .CN-Ontario:hover,
.projectMap .CN-Saskatchewan:hover,
.projectMap .US-ClinchRiver:hover,
.projectMap .CN-Ontario.hovered,
.projectMap .CN-Saskatchewan.hovered,
.projectMap .US-ClinchRiver.hovered {
background-color: #00A4DE;
}

.projectMap .CN-Ontario::before,
.projectMap .CN-Saskatchewan::before,
.projectMap .US-ClinchRiver::after{
position: absolute;
content: "";
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
opacity: 0.8;
animation: makerAnime 1s linear infinite;
background-color: #3a72b8;
z-index: 90;
}
.projectMap .CN-Ontario.current::before,
.projectMap .CN-Saskatchewan.current::before,
.projectMap .US-ClinchRiver.current::after{
background-color: #fff;
}
@keyframes makerAnime{
0%{transform: scale(1); opacity: 0.8;}
100%{transform: scale(1.4); opacity: 0;}
}
.projectMap .CN-Ontario{
top: 184px;
left: 398px;
}
.projectMap .CN-Saskatchewan{
top: 130px;
left: 260px;
}
.projectMap .US-ClinchRiver{
top: 250px;
left: 376px;
}
.bwrx-300_project:not(.contentOn) .projectMap .CN-Ontario,
.bwrx-300_project:not(.contentOn) .projectMap .CN-Saskatchewan,
.bwrx-300_project:not(.contentOn) .projectMap .US-ClinchRiver{
cursor: pointer;
}
.projectMap .locationName{
font-size: 14px;
line-height: 1.3em;
color: #fff;
position: absolute;
background-color: #3a72b8;
text-align: left;
cursor: pointer;
z-index: 80;
pointer-events: auto;
width: 178px;
transition: all 0.5s;
}
.projectMap .locationName span.LoImg{
background-color: #fff;
display: block;
overflow: hidden;
transition: all 0.3s;
}
.projectMap .locationName img{
width: 100%;
height: auto;
display: block;
transition: all 0.3s;
}
.projectMap .locationName span.LoText{
padding: 6px 8px;
display: block;
}
.projectMap .locationName.hovered,
.projectMap .locationName:hover{
background-color: #00A4DE;
}
.projectMap .locationName.hovered span.LoImg img,
.projectMap .locationName:hover span.LoImg img{
opacity: 0.7;
transform: scale(1.2);
}
.projectMap .locationName#Ontario{
top: 41px;
left: 398px;
}
.projectMap .locationName#Saskatchewan{
top: 10px;
left: 60px;
}
.projectMap .locationName#ClinchRiver{
top: 180px;
left: 180px;
}
.projectMap .locationName.current{
font-weight: bold;
background-color: #00A4DE;
}
.projectMap .btnReturn{
display: none;
opacity: 0;
background-color: #D2D2D2;
cursor: pointer;
font-size: 14px;
line-height: 1em;
color: #666;
position: absolute;
z-index: 80;
width: 100px;
pointer-events: auto;
transition: all 0.35s;
}
.projectMap .btnReturn span{
padding: 6px 10px;
display: block;
}
.bwrx-300_project.contentOn{
display: flex;
}
.bwrx-300_project.contentOn .projectMap .locationName span.LoImg{
animation: locationImgAnime 0.3s linear forwards;
position: absolute;
top: 0;
left: 0;
}
@keyframes locationImgAnime{
0%{ opacity: 1; top: 0;}
99%{ opacity: 0; top: -50px;}
100%{ opacity: 0; visibility: hidden; top: -50px;}
}

.bwrx-300_project.contentOn .projectMap .locationBtns{
animation: locationBtnsAnime 0.5s linear forwards;
}
@keyframes locationBtnsAnime{
0%{left: 50%; top: 0; transform: translateX(-50%); width: 538px; min-height: 420px;}
100%{left: 0; top: 0; transform: translateX(0); width: 180px; min-height: auto;}
}

.bwrx-300_project.contentOn .projectMap{
width: 200px !important;
}
.bwrx-300_project.contentOn .tabcontentsSet{
width: calc(100% - 200px) !important;
}
.bwrx-300_project.contentOn .projectMap .mapImg{
animation: mapImgAnime 1.5s ease forwards;
}
@keyframes mapImgAnime {
0%{
transform: scale(1) translateX(-50%);
left: 50%;
}
30%, 40%{
transform: scale(0.3) translateX(0);
left: 0;
transform-origin: 0 center;
}
100%{
transform: scale(0.3) translateX(0);
left: 0;
transform-origin: 0 0;
}
}
/* mapImg reverse Anime */
@keyframes mapImgReverseAnime {
0%{
transform: scale(0.3) translateX(0);
left: 0;
transform-origin: 0 0;
}
100%{
transform: scale(1) translateX(-50%);
left: 50%;
}
}
.bwrx-300_project.contentOn .projectMap .mapImg img{
cursor: pointer;
}
.bwrx-300_project.contentOn .projectMap .locationName span.LoText{
padding: 4px 10px;
}
.bwrx-300_project.contentOn .projectMap .locationName#Ontario{
animation: locOntAnime 1s ease-in-out forwards;
animation-delay: 0.3s;
}
.bwrx-300_project.contentOn .projectMap .locationName#Saskatchewan{
animation: locSasAnime 1s ease-in-out forwards;
animation-delay: 0.2s
}
.bwrx-300_project.contentOn .projectMap .locationName#ClinchRiver{
animation: locCliAnime 1s ease-in-out forwards;
animation-delay: 0.4s;
}

@keyframes locOntAnime {
0%{}
100%{ width: 100%; top: 150px; left: 0;}
}
@keyframes locSasAnime {
0%{}
100%{ width: 100%; top: 180px; left: 0;}
}
@keyframes locCliAnime {
0%{}
100%{ width: 100%; top: 210px; left: 0;}
}

/*locationName reverse Anime*/
@keyframes locOntReverseAnime {
0%{ width: 100%; top: 150px; left: 0;}
100%{ width: 178px; top: 41px; left: 398px;}
}
@keyframes locSasReverseAnime {
0%{ width: 100%; top: 180px; left: 0;}
100%{ width: 178px; top: 10px; left: 60px;}
}
@keyframes locCliReverseAnime {
0%{ width: 100%; top: 210px; left: 0;}
100%{ width: 178px; top: 180px; left: 180px;}
}

.bwrx-300_project.contentOn .projectMap .btnReturn{
animation: loRet 1s ease-in-out forwards;
display: block;
opacity: 0;
}

@keyframes loRet {
0%{ opacity: 0; left: 0; top: 280px;}
100%{ opacity: 1; left: 0; top: 280px;}
}

.bwrx-300_project.contentOn .projectMap .btnReturn:hover{
background-color: #00A4DE;
color: #fff;
}
.tabcontentsSet{
max-width: 1025px;
margin: 0 0 0 auto;
padding: 15px;
position: relative;
}
.tabcontentsSet .frame{
width: 0;
display: none;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid rgba(180,180,180,0);
}
.bwrx-300_project.contentOn .tabcontentsSet .frame{
display: block;
border: 1px solid rgba(180,180,180,0);
animation: contentsSetAni 2s linear forwards;
}

@keyframes contentsSetAni {
0%{
width: 0;
height: 0;
border-color: rgba(180,180,180,1);
}
30%{
width: 100%;
height: 100%;
border-color: rgba(180,180,180,1);
}
60%{
width: 100%;
height: 100%;
border-color: rgba(180,180,180,1);
}
100%{
width: 100%;
height: 100%;
border-color: rgba(180,180,180,0);
}
}

.tabContent{
max-width: 100%;
margin: 0 0 0 auto;
position: relative;
display: none;
bottom: 0;
}
.bwrx-300_project.contentOn .tabContent.active{
animation: contentActive 0.5s linear forwards;
animation-delay: 0.5s;
display: block;
opacity: 0;
bottom: 0;
}

@keyframes contentActive {
0%{
top: 50px;
opacity: 0;
}
100%{
top: 0;
opacity: 1;
}
}

.projectTitle{
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
border-bottom: 3px solid #3a72b8;
}
.projectTitle + p{
font-size: 16px;
line-height: 1.6em;
margin-bottom: 20px;
}
.pimg{
display: flex;
}
.pimg img:nth-child(1){
width: 56%;
height: auto;
}
.pimg img:nth-child(2){
width: calc(44% - 20px);
margin-left: 20px;
height: auto;
}

@media screen and (max-width: 767px){
.pimg{
display: block;
text-align: center;
}
.pimg img:nth-child(1){
width: auto;
max-width: 100%;
margin: 0 auto 20px;
}
.pimg img:nth-child(2){
width: auto;
max-width: 100%;
margin: 0 auto;
}
}

.bwrx-300_project.contentOn .tabContent.deactive{
animation: contentDeactive 0.3s linear forwards;
opacity: 1;
bottom: 0;
}

@keyframes contentDeactive {
0%{
display: block;
top: 0;
opacity: 1;
}
95%{
top: -30px;
opacity: 0;
display: none;
}
100%{
top: 0;
opacity: 0;
display: none;
}
}

.projectListTitle{
font-size: 18px;
line-height: 1.5em;
color: #6D6E71;
font-weight: bold;
margin: 40px 0 20px; 
border-bottom: 1px solid #005e60;
}
.projectList{
margin-bottom: 20px;
}
.projectList li{
font-size: 16px;
line-height: 1.6em;
margin-bottom: 10px;
}
.projectList li dl dt{
color: #6D6E71;
}
.projectList li dl dd a:link,
.projectList li dl dd a:visited{
color: #005e60;
}
.projectList li dl dd a:hover{
color: #005e60;
}
.projectDetailsTable{
border-collapse:collapse;
border-spacing:0;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.projectDetailsTable tbody td ul li{
padding-left: 1em;
text-indent: -1em;
}
.projectDetailsTable tbody td ul li::before{
content: "・";
font-size: inherit;
color: #99cfcf;
}

@media screen and (max-width: 767px){
.bwrx-300_project{
overflow: hidden;
}
.bwrx-300_project.contentOn .tabcontentsSet{
width: 100% !important;
}
.projectMap .locationName#Saskatchewan {
top: 0px;
left: 96px;
}
.DownloadList dt{
margin-right: 8px;
}
}

@media screen and (max-device-width: 767px){
.projectMap{
transform: scale(0.9);
}
.bwrx-300_project.contentOn{
flex-direction: column;
}
.bwrx-300_project.contentOn .projectMap{
height: 150px;
}
.tabcontentsSet{
padding: 15px 0;
}
.projectMap .locationName#Saskatchewan,
.projectMap .locationName#ClinchRiver,
.projectMap .locationName#Ontario{
transform: scale(0.8);
}
.projectMap .locationName#Ontario {
top: 40px;
left: 290px;
}
.bwrx-300_project.contentOn .projectMap {
transform: scale(1);
}
.bwrx-300_project.contentOn .projectMap .locationName#Saskatchewan,
.bwrx-300_project.contentOn .projectMap .locationName#ClinchRiver,
.bwrx-300_project.contentOn .projectMap .locationName#Ontario{
transform: scale(1);
}

@keyframes locOntAnime {
0%{}
100%{ width: 100%; top: 0px; left: 160px;}
}
@keyframes locSasAnime {
0%{}
100%{ width: 100%; top: 30px; left: 160px;}
}
@keyframes locCliAnime {
0%{}
100%{ width: 100%; top: 60px; left: 160px;}
}

@keyframes locOntReverseAnime {
0%{ width: 100%; top: 150px; left: 0;}
100%{ width: 178px; top: 40px; left: 298px;}
}
@keyframes locSasReverseAnime {
0%{ width: 100%; top: 100px; left: 0;}
100%{ width: 178px; top: 10px; left: 80px;}
}

@keyframes loRet {
0%{ opacity: 0; left: 160px; top: 110px;}
80%{ opacity: 0; left: 160px; top: 110px;}
100%{ opacity: 1; left: 160px; top: 110px;}
}
.DownloadList {
flex-direction: column;
justify-content: right;
align-items: normal;
gap: 15px;
}
}