@charset "UTF-8";

/* *****************
clear format
***************** */
.Grid4::before,
.Grid4::after,
.GEVernovaGridSet+.GEVernovaGridSet,
.Grid3::after {
display: none;
}

:root {
--BWRX-300_VernovaGreen: #005e60;
--BWRX-300_ElectricLime: #c8ff08;
--BWRX-300_ElectricLime: rgb(200, 255, 8);
--BWRX-300_VernovaGreenDark: #00474a;
--Red1: #fa000f;
--Red2: #cc0000;
--Gray1: #f4f4f4;
--Gray3: #B3B3B3;
--Gray4: #737373;
--Gray5: #4d4d4d;
--Gray6: #222222;
--Gray7: #0c0c0c;
--Bule2: #0064FA;
--White: #ffffff;
}

.CatchCopyBWRX-300 strong{
color: #6D6E71;
}
.h2__BWRX-300::before{
display: none;
}
h2.h2__BWRX-300.Text--White span,
.Text--White{
color: var(--White);
}
h2.h2__BWRX-300.Text--White span,
h2.h2__BWRX-300 span{
padding-left: 0;
padding-right: 0;
}
h3.h3__BWRX-300{
padding-left: 0;
margin-bottom: 1em;
}
h3.h3__BWRX-300::before{
display: none;
}
h4.h4__BWRX-300.slash{
padding-left: 1.5em;
position: relative;
}
h4.h4__BWRX-300.slash::before{
display: inline-block;
content: "";
height: 1em;
width: 0.4em;
background-color: var(--BWRX-300_VernovaGreen);
position: absolute;
left: 0;
top: 4px;
transform: translateX(0.5em) skewX(-40deg);
}
.Lead__BWRX-300{
font-size: 125%;
font-weight: 500;
margin-bottom: 1em;
}
.Text--BWRX-300_ElectricLime{
color: var(--BWRX-300_ElectricLime);
}
.Text--VernovaGreen{
color: var(--BWRX-300_VernovaGreen);
}
.Text--palt{
font-feature-settings: "palt";
letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
h2.h2__BWRX-300 span{
padding: 0;
}
}

/* *****************
column
***************** */
.ColumnSet__BWRX-300{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gap25{
gap: 25px;
}
.gap80{
gap: 80px;
}
.ColumnItem__BWRX-300{
min-width: 0;
}

/* *****************
hero
***************** */
.PageTitleStyle1.Hero__BWRX-300 {
min-height: 600px;
padding: 0;
background-color: var(--BWRX-300_VernovaGreen);
overflow: hidden;
margin: 0;
margin-inline: calc(50% - 50vw);
position: relative;
}
.PageTitleStyle1-Inner.Hero__BWRX-300--inner {
position: relative;
max-width: 1305px;
width: 100%;
min-height: 600px;
margin: 0 auto;
padding: 0 15px;
}

/* ----------------------------------
title
---------------------------------- */
.Hero__BWRX-300--title {
position: absolute;
top: 0;
left: 15px;
z-index: 5;
width: 300px;
height: 100%;
padding: 80px 0 0 0;
}
.Hero__BWRX-300--title::before {
content: "";
position: absolute;
top: 0;
left: -30px;
z-index: -1;
width: 620px;
height: 100%;
background: linear-gradient(
to right,
rgba(0, 94, 96, 1) 0%,
rgba(0, 94, 96, 1) 45%,
rgba(0, 94, 96, .9) 60%,
rgba(0, 94, 96, 0) 100%
);
pointer-events: none;
}
.Hero__BWRX-300--title::after{
position: absolute;
content: "";
display: block;
width: clamp(80px, 14vw, 160px);
height: calc(100% + clamp(120px, 12vw, 200px));
left: 0;
top: 50%;
background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.15) 60%, rgba(255,255,255,0.05) 100%);
transform: translate(-45%, -50%) skewX(-40deg);
transform-origin: center;
z-index: -1;
pointer-events: none;
transition: left .3s, top .3s;
opacity: 0;
animation: Hero__BWRX-300--title_after 1.5s ease-out 1.75s forwards;
}

@keyframes Hero__BWRX-300--title_after {
0%{opacity: 0;}
100%{opacity: 1;}
}

.Hero__BWRX-300--title h1 {
margin: 0 0 25px;
animation: HeroTextSlideIn 1s ease-out 1s forwards;
transform: translateX(-50vw);
opacity: 0;
}
.Hero__BWRX-300--title h1 a {
text-decoration: none;
font-size: 50px;
font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans", sans-serif;
font-weight: 700;
}
.Hero__BWRX-300--title h1 a span {
color: var(--BWRX-300_ElectricLime);
}
.Hero__BWRX-300--text {
color: var(--White);
line-height: 1.8;
animation: HeroTextSlideIn 1s ease-out 1.25s forwards;
transform: translateX(-50vw);
opacity: 0;
}

@keyframes HeroTextSlideIn {
0% {
opacity: 0;
transform: translateX(-50vw);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.Hero__BWRX-300::before{
content: "";
display: block;
height: 100%;
width: 200vw;
background-color: var(--BWRX-300_VernovaGreen);
position: absolute;
left: -50vw;
top: 0;
z-index: 15;
transform: skew(-40deg);
animation: Hero__BWRX-300Before 1s ease-out 0.75s forwards;
}
@keyframes Hero__BWRX-300Before{
0% {
left:-50vw
}
100% {
left:200vw
}
}

@media screen and (max-width: 1304px) {
.PageTitleStyle1.Hero__BWRX-300 h1{
padding-left: 0;
padding-right: 15px;
}
}

/* *****************
hero slide
***************** */
.HeroSlider {
--cut-x: 118px;
--cut-y: 140px;
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 1020px;
height: 600px;
}
.HeroSlider__stage {
position: relative;
width: 100%;
height: 100%;
}
.HeroSlider__item {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition:
transform .7s cubic-bezier(.22, .61, .36, 1),
width .7s cubic-bezier(.22, .61, .36, 1),
height .7s cubic-bezier(.22, .61, .36, 1),
opacity .35s ease,
clip-path .7s ease;
}
.HeroSlider__item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* ----------------------------------
current
---------------------------------- */
.HeroSlider__item.is-current {
width: 100%;
height: 100%;
opacity: 1;
z-index: 5;
transform: translate(0, 0);
clip-path: polygon(
var(--cut-x) 0,
100% 0,
100% calc(100% - var(--cut-y)),
calc(100% - var(--cut-x)) 100%,
0 100%,
0 var(--cut-y)
);
}
.HeroSlider__item.is-prev,
.HeroSlider__item.is-next {
width: 110px;
height: 74px;
opacity: 1;
z-index: 4;
pointer-events: auto;
clip-path: polygon(
/*62px 0,*/
64px 0,
110px 0,
48px 100%,
0 100%);
cursor: pointer;
}

/* ----------------------------------
prev
---------------------------------- */
.HeroSlider__item.is-prev {
transform: translate(0, 0);
}

/* ----------------------------------
next
---------------------------------- */
.HeroSlider__item.is-next {
transform: translate(952px, 480px);
}

/* ----------------------------------
indicator
---------------------------------- */
.HeroSlider__indicator {
position: absolute;
right: 20px;
bottom: 28px;
z-index: 10;
display: flex;
justify-content: flex-end;
gap: 10px;
margin: 0;
}
.HeroSlider__indicator button {
width: 68px;
height: 5px;
padding: 0;
border: 0;
border-radius: 4px;
background: rgba(255, 255, 255, .35);
cursor: pointer;
}
.HeroSlider__indicator button.is-current {
background: var(--White);
}

@media screen and (max-width: 767px) {
/* ==============================
Hero
============================== */
.PageTitleStyle1.Hero__BWRX-300 {
min-height: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.PageTitleStyle1-Inner.Hero__BWRX-300--inner {
display: block;
min-height: 0;
padding: 0 15px 50px;
}

/* ==============================
Title
============================== */
.Hero__BWRX-300--title {
position: relative;
top: auto;
left: auto;
width: 100%;
height: auto;
padding: 25px 5px 30px;
}
.Hero__BWRX-300--title::before {
display: none;
}

/* ==============================
  Slider
============================== */
.HeroSlider {
--current-cut-x: 68px;
--current-cut-y: 80px;
position: relative;
top: auto;
right: auto;
z-index: 1;
width: 100%;
height: auto;
margin: 0;
}
.HeroSlider__stage {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}

/* current */
.HeroSlider__item.is-current {
width: 100%;
height: 100%;
transform: translate(0, 0);
clip-path: polygon(
  var(--current-cut-x) 0,
  100% 0,
  100% calc(100% - var(--current-cut-y)),
  calc(100% - var(--current-cut-x)) 100%,
  0 100%,
  0 var(--current-cut-y)
);
}

/* prev / next */
.HeroSlider__item.is-prev,
.HeroSlider__item.is-next {
width: 77px;
height: 52px;
opacity: 1;
z-index: 4;
clip-path: polygon(43px 0,77px 0,34px 100%,0 100%);
}
/* prev */
.HeroSlider__item.is-prev {
transform: translate(-15px, 0);
}
/* next */
.HeroSlider__item.is-next {
transform: translate(
calc(100vw - 99px), calc((100vw - 30px) * 9 / 16 - 45px));
}
/* indicator */
.HeroSlider__indicator {
position: relative;
right: auto;
bottom: auto;
justify-content: flex-end;
margin-top: 20px;
}
.HeroSlider__indicator button {
width: 40px;
}
}

.SectionInner{
position: relative;
z-index: 5;
max-width: 1305px;
margin: 0 auto;
padding: 60px 15px;
}
@media screen and (max-width: 767px) {
.SectionInner{
padding: 25px;
}
}

/* *****************
Section 1
***************** */
#Section01{
background-color: var(--BWRX-300_VernovaGreen);
padding-bottom: 0;
position: relative;
overflow: hidden;
margin-inline: calc(50% - 50vw);
}
#Section01 .SectionInner{
position: relative;
z-index: 5;
max-width: 1305px;
margin: 0 auto;
}
#Section01::before{
position: absolute;
content: "";
display: block;
width: 100px;
height: 100%;
height: 500px;
left: 0;
top: -5px;
background-color: var(--White);
z-index: 1;
transform-origin: top left;
transform: skewX(-40deg);
pointer-events: none;
transition: left .3s;
}
.ColumnItemSec01Left .Text--White{
-webkit-text-stroke: 2px var(--BWRX-300_VernovaGreen);
paint-order: stroke fill;
}
.ColumnItemSec01Left{
position: relative;
z-index: 8;
}
.ColumnItemSec01Right{
display: flex;
justify-content: center;
align-items: center;
position: relative;
isolation: isolate;
}
.ColumnItemSec01Right::after{
position: absolute;
content: "";
display: block;
width: 0;
height: calc(100% + clamp(120px, 12vw, 200px));
left: 50%;
top: 50%;
background-color: var(--White);
transform: translate(-50%, -50%) skewX(-40deg);
transform-origin: center;
z-index: 0;
pointer-events: none;
transition: left .3s, top .3s;
}
.Img__Sec01--01{
width: 120px;
position: relative;
z-index: 1;
transition: top .3s;
}
.Img__Sec01--01::before,
.Img__Sec01--01::after{
display: block;
content: "";
border-radius: 50%;
background-color: var(--BWRX-300_ElectricLime);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) scale(0.7);
opacity: 0;
z-index: -1;
}
#Section01.is-animate .Img__Sec01--01::before,
#Section01.is-animate .Img__Sec01--01::after{
animation: Sec01Pulse 3s ease-out infinite;
}

#Section01.is-animate .Img__Sec01--01::before{
width: 260px;
height: 260px;
z-index: -1;
}
#Section01.is-animate .Img__Sec01--01::after{
width: 260px;
height: 260px;
z-index: -1;
animation-delay: 1.5s;
}
@keyframes Sec01Pulse{
0%{
transform: translate(-50%, -50%) scale(0.7);
opacity: 0;
}
20%{
opacity: 0.3;
}
100%{
transform: translate(-50%, -50%) scale(1.3);
opacity: 0;
}
}

#Section01.is-animate .ColumnItemSec01Right::after{
animation: ColumnItemSec01RightSlash .25s ease-out 0.5s forwards;
}

@keyframes ColumnItemSec01RightSlash {
0%{width: 0;}
100%{width: clamp(120px, 14vw, 220px);}
}

.Img__Sec01--01 img{
display: block;
max-width: 100%;
position: relative;
z-index: 5;
transform: translateY(-50vh);
opacity: 0;

}
#Section01.is-animate .Img__Sec01--01 img{
animation: Img_Sec01_01 0.5s ease-out forwards;
}

@keyframes Img_Sec01_01{
0%{transform: translateY(-50vh); opacity: 0;}
100%{transform: translateY(0); opacity: 1;}
}

@media screen and (min-width: 801px) and (max-width: 1100px) {
.Img__Sec01--01{
top: 10vw;
}
.ColumnItemSec01Right::after{
left: 27vw;
}
}
@media screen and (max-width: 1500px) {
#Section01::before{
left: -50px;
}
}

@media screen and (max-width: 800px) {
.ColumnSet__BWRX-300.ColumnSet__Res800{
grid-template-columns: 1fr;
gap: 80px;
}
.ColumnItemSec01Right::after {
width: 0;
height: calc(100% + 120px);
}

#Section01.is-animate .Img__Sec01--01 img{
animation: Img_Sec01_01 1s ease-out 0.75s forwards;
}

#Section01.is-animate .Img__Sec01--01::before,
#Section01.is-animate .Img__Sec01--01::after{
animation: Sec01Pulse 3s ease-out 2s infinite;
}
#Section01.is-animate .Img__Sec01--01::after{
animation-delay: 3.5s;
}

#Section01.is-animate .ColumnItemSec01Right::after{
animation: ColumnItemSec01RightSlash .25s ease-out 1.5s forwards;
}

#Section01.is-animate .ColumnItemSec01Right::after{
animation: ColumnItemSec01RightSlashSP .25s ease-out 1.75s forwards;
}
@keyframes ColumnItemSec01RightSlashSP {
0%{width: 0;}
100%{width: clamp(100px, 34vw, 160px);}
}
}

/* *****************
section2
***************** */
#Section02{
background-color: var(--BWRX-300_VernovaGreen);
padding-bottom: 0;
position: relative;
overflow: hidden;
margin-inline: calc(50% - 50vw);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 90vh;
}
.Section02_bg{
position: absolute;
inset: 0;
z-index: -1;
}
.Section02_bg img{
width: 100%;
height: 100%;
object-fit: cover;
}
.Section02__Header,
.Section02__Content{
background-color: rgba(0, 94, 96, 0.9);
}
.Section02__HeaderInner{
position: relative;
z-index: 5;
max-width: 1305px;
margin: 0 auto;
padding: 30px 15px;
display: flex;
gap: 40px;
}
.Section02__HeaderInner h2{
white-space: nowrap;
}

.Section02__ContentInner{
position: relative;
z-index: 5;
max-width: 1305px;
margin: 0 auto;
padding: 30px 15px;
}

.facility-process--wrapper{
display: flex;
justify-content: center;
width: 100%;
}
.facility-process{
display: flex;
gap: clamp(10px, calc(10px + 15 * ((100vw - 768px) / 507)), 25px);
padding: 0 30px;
}
.facility-process li{
background-color: rgba(255, 255, 255, 1);
padding: 10px clamp(20px, calc(20px + 20 * ((100vw - 768px) / 507)), 40px);
transform: skewX(-40deg);
}
.facility-process li:nth-child(1),
.facility-process li:nth-child(2),
.facility-process li:nth-child(3),
.facility-process li:nth-child(4){
opacity: 0;
transform: translateX(-50vw);
}
.facility-process.is-animate li:nth-child(1){
animation: facility-process 1s ease-out 0s forwards;
}
.facility-process.is-animate li:nth-child(2){
animation: facility-process 1s ease-out 0.25s forwards;
}
.facility-process.is-animate li:nth-child(4){
animation: facility-process 1s ease-out 0.75s forwards;
}

@keyframes facility-process {
0% {
opacity: 0;
transform: translateX(-50vw) skewX(-40deg);
background-color: rgba(255, 255, 255, 1);
}
100% {
opacity: 1;
transform: translateX(0) skewX(-40deg);
background-color: rgba(255, 255, 255, 0.7);
}
}

.facility-process li.maker__current{
background-color: var(--BWRX-300_ElectricLime);
display: flex;
flex-direction: row;
align-items: center;
gap: clamp(10px, calc(10px + 15 * ((100vw - 768px) / 507)), 25px);
}
.facility-process.is-animate li.maker__current{
animation: facility-process_maker__current 2s ease-out 0.5s forwards;
}

@keyframes facility-process_maker__current {
0% {
opacity: 0;
transform: translateX(-50vw) skewX(-40deg);
background-color: var(--White);
}
50% {
opacity: 1;
transform: translateX(0) skewX(-40deg);
}
75%{
opacity: 1;
background-color: rgba(255, 255, 255, 1);
transform: translateX(0) skewX(-40deg);
}
100%{
opacity: 1;
background-color: var(--BWRX-300_ElectricLime);
transform: translateX(0) skewX(-40deg);
}
}

.facility-process li span{
display: block;
transform: skewX(40deg);
font-size: clamp(16px, calc(16px + 2 * ((100vw - 768px) / 507)), 18px);
color: #222222;
}
.facility-process li.maker__current span{
font-size: clamp(18px, calc(18px + 6 * ((100vw - 768px) / 507)), 24px);
font-weight: 600;
}
.facility-process li.maker__current i{
display: flex;
align-items: center;
background-color: var(--Gray7);
padding: 0;
height: 20px;
width: 68px;
justify-content: center;
}
.facility-process li.maker__current i span{
display: block;
transform: skewX(40deg);
color: var(--White);
font-size: 14px;
line-height: 1.2em;
}

@media screen and (max-width: 767px) {
#Section02{
min-height: 120vh;
}
.Section02__HeaderInner{
flex-direction: column;
gap: 0;
}
.Section02__HeaderInner,
.Section02__ContentInner{
padding: 30px 25px;
}

.facility-process li{
width: 100%;
display: flex;
justify-content: center;
}
}

#Section02 .SectionInner{
position: relative;
z-index: 5;
max-width: 1305px;
margin: 0 auto;
}
.Img__Sec02--01 img{
max-width: 100%;
}

@media screen and (max-width: 994px) {
.JS #Contents .Section02_bg img{
height: 100%;
}
.facility-process{
flex-direction: column;
gap: 15x;
width: 100%;
}
}

/* *****************
section3
***************** */
.Strengths__BWRX-300{
display: grid;
grid-template-columns: minmax(0, 3.5fr) minmax(0, 1.5fr);
gap: 30px;
}
.gap25{
gap: 25px;
}
.Strengths__BWRX-300_content{
min-width: 0;
}
.Strengths__BWRX-300 img{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.Strengths__BWRX-300_lead{
font-size: 16px;
margin-bottom: 1em;
}

/* ==============================
Strengths list
============================== */
.Strengths__BWRX-300_list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--Gray4);
}
.Strengths__BWRX-300_group {
position: relative;
padding: 10px 0;
border-bottom: 1px solid var(--Gray4);
opacity: 0;
transform: translateY(-60px);
}
#Section03.is-animate .Strengths__BWRX-300_group {
animation: StrengthsBWRX300group 0.5s ease-out 1s forwards;
}
#Section03.is-animate .Strengths__BWRX-300_group:nth-child(2) {
animation-delay: 1.35s;
}
#Section03.is-animate .Strengths__BWRX-300_group:nth-child(3) {
animation-delay: 1.7s;
}
#Section03.is-animate .Strengths__BWRX-300_group:nth-child(4) {
animation-delay: 2.05s;
}

@keyframes StrengthsBWRX300group {
0% {
opacity: 0;
transform: translateY(-60px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

.Strengths__BWRX-300_items {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
min-width: 0;
}
.Strengths__BWRX-300_item {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(90px, 0.8fr);
gap: 15px;
align-items: stretch;
min-width: 0;
}
.Strengths__BWRX-300_item_textGroup {
min-width: 0;
}
.Strengths__BWRX-300_text {
min-width: 0;
}
.Strengths__BWRX-300_image {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.JS #Contents .Strengths__BWRX-300_image img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 150px;
object-fit: contain;
}

/* 優れた経済性 */
.Strengths__BWRX-300_group:nth-child(2) .Strengths__BWRX-300_item {
grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2fr);
}

.Strengths__BWRX-300_comparison {
display: flex;
align-items: stretch;
gap: 15px;
min-width: 0;
}

.Strengths__BWRX-300_comparisonItem {
position: relative;
flex: 0 0 auto;
}

.Strengths__BWRX-300_comparisonItem img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}

.Strengths__BWRX-300_comparisonItem:nth-child(1) {
width: 145px;
}

.Strengths__BWRX-300_comparisonItem:nth-child(3) {
width: 145px;
}
.Strengths__BWRX-300_arrow {
flex: 0 0 40px;
width: 40px;
display: flex;
align-items: center;
}
.Strengths__BWRX-300_arrow img {
display: block;
width: 40px;
height: 22px;
}

.Strengths__BWRX-300_comparisonItemInner {
position: relative;
}

.Strengths__BWRX-300_caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(12, 12, 12, 0.5);
color: var(--White);
text-align: center;
}

.Strengths__BWRX-300_comparisonText {
flex: 1;
align-self: center;
min-width: 0;
}

/* 短く確実な建設 */
.Strengths__BWRX-300_group:nth-child(3) .Strengths__BWRX-300_item {
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.8fr);
}

.JS #Contents .Strengths__BWRX-300_image--wide img {
  max-height: 180px;
}

.Strengths__BWRX-300_group:nth-child(3) .Strengths__BWRX-300_image--wide img,
.JS #Contents .Strengths__BWRX-300_group:nth-child(3) .Strengths__BWRX-300_image--wide img{
  max-height: 120px;
}

/* 柔軟性 */
.Strengths__BWRX-300_items--flexibility {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}

.Strengths__BWRX-300_items--flexibility .Strengths__BWRX-300_item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 15px;
align-items: center;
}

.Strengths__BWRX-300_image--flexibility {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-width: 0;
}
.Strengths__BWRX-300_image--flexibility span,
.Strengths__BWRX-300_text span {
font-size: 14px;
line-height: 1.15em;
padding-top: 0.5em;
}
.JS #Contents .Strengths__BWRX-300_image.Strengths__BWRX-300_image--flexibility img {
width: 100%;
height: auto;
max-width: 300px;
max-height: 120px;
object-fit: contain;
}
.Strengths__BWRX-300_group:nth-child(4) h4{
position: absolute;
top: 12px;
}


.Strengths__BWRX-300_model{
position: relative;
min-width: 0;
}
.Strengths__BWRX-300_model::before{
display: block;
content: "";
width: 150%;
height: 100%;
background-color: var(--BWRX-300_VernovaGreen);
transform-origin: bottom left;
transform: skewX(-40deg);
position: absolute;
left: 100vw;
bottom: 0;
}

#Section03.is-animate .Strengths__BWRX-300_model::before{
animation: StrengthsBWRX300modelBefore 0.75s ease-out 1s forwards;
}
@keyframes StrengthsBWRX300modelBefore {
0%{left: 100vw;}
100%{left: 0;}
}

.Strengths__BWRX-300_modelImage{
position: absolute;
top: 65%;
left: 0;
transform: translateY(-50%);
width: 100%;
opacity: 0;
}

#Section03.is-animate .Strengths__BWRX-300_modelImage{
animation: StrengthsBWRX300modelImage 1.5s ease-out 1.7s forwards;
}

@keyframes StrengthsBWRX300modelImage {
0%{top: 65%; opacity: 0;}
100%{top:50%; opacity: 1;}
}

@media screen and  (min-width: 920px) and (max-width: 1150px) {

.Strengths__BWRX-300_comparison{
flex-direction: column;
align-items: center;
}
.Strengths__BWRX-300_comparisonItem{
max-width: 80px;
}

.Strengths__BWRX-300_comparisonItem:nth-child(2){
padding-left: 0;
padding-top: 40px;
position: relative;
}
.Strengths__BWRX-300_arrow img{
display: block;
transform: rotate(90deg);
}
.Strengths__BWRX-300_items{
flex-direction: column;
}
.Strengths__BWRX-300_items.Strengths__BWRX-300_items--flexibility{
gap: 30px;
}
.Strengths__BWRX-300_items--flexibility{
flex-direction: column;
}
.Strengths__BWRX-300_image.Strengths__BWRX-300_image--flexibility{
flex: 1.6;
}

}
@media screen and (max-width: 920px) {
.Strengths__BWRX-300{
grid-template-columns: 1fr;
}
.Strengths__BWRX-300_content{
order: 2;
}
.Strengths__BWRX-300_model{
order: 1;
display: flex;
justify-content: center;
}
.Strengths__BWRX-300_modelImage{
position: relative;
transform: none;
top: 0;
width: 80%;
padding: 2em 0;
}
#Section03.is-animate .Strengths__BWRX-300_modelImage{
animation: StrengthsBWRX300modelImageSP 1.5s ease-out 1.7s forwards;
}

@keyframes StrengthsBWRX300modelImageSP {
0%{top: 65%; opacity: 0;}
100%{top:0; opacity: 1;}
}

.Strengths__BWRX-300_model::before{
transform-origin: bottom left;
left: 0;
bottom: 0;
}
}

@media screen and (max-width: 767px) {
.Strengths__BWRX-300_lead{
margin-bottom: 2em;
}

#Section03 .SectionInner{
padding: 60px 0 0;
}
.Strengths__BWRX-300_item {
gap: 15px;
}
.Strengths__BWRX-300_items {
grid-template-columns: minmax(0, 1fr);
}
.Strengths__BWRX-300_group:nth-child(1) .Strengths__BWRX-300_item {
grid-template-columns: minmax(0, 1fr);
}
.Strengths__BWRX-300_group:nth-child(2) .Strengths__BWRX-300_item {
grid-template-columns: minmax(0, 1fr);
}
.Strengths__BWRX-300_item_textGroup,
.Strengths__BWRX-300_comparison {
width: 100%;
min-width: 0;
}
.Strengths__BWRX-300_group:nth-child(3) .Strengths__BWRX-300_item {
grid-template-columns: minmax(0, 1fr);
}
.Strengths__BWRX-300_items--flexibility .Strengths__BWRX-300_item {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 15px;
align-items: center;
}
.Strengths__BWRX-300_group:nth-child(4) h4{
position: relative;
top: auto;
}
/*******/
.Strengths__BWRX-300_comparison{
flex-direction: column;
align-items: center;
flex: 0.75;
}
.Strengths__BWRX-300_comparisonItem{
max-width: none;
width: 100%;
}
.Strengths__BWRX-300_comparisonItem:nth-child(2){
padding-left: 0;
padding-top: 40px;
position: relative;
}
.Strengths__BWRX-300_items{
flex-direction: column;
}
.Strengths__BWRX-300_arrow img{
display: block;
transform: rotate(90deg);
}
}

/* *****************
Section 4
***************** */
#Section04{
padding-bottom: 0;
position: relative;
overflow: hidden;
margin-inline: calc(50% - 50vw);
min-height: 70vh;
}
.project__BWRX-300{
display: flex;
flex-direction: column;
gap: 20px;
justify-content: space-between;
position: relative;
margin-top: 2em;
}
.project__BWRX-300_bg #worlddot{
opacity: 0;
}
.project__BWRX-300_bg #pointer circle,
.project__BWRX-300_bg #pointer path{
fill: var(--BWRX-300_VernovaGreen);
}
#Section04.is-animate #worlddot{
animation: worlddot 0.6s ease-out 1s forwards;
}
@keyframes worlddot {
0%{opacity: 0;}
100%{opacity: 1;}
}

#pointer circle,
#pointer path{
opacity: 0;
}
#pointer circle.marker{
transform-box: fill-box;
transform-origin: center;
transform: scale(0);
}
#pointer circle.blinkmarker-01,
#pointer circle.blinkmarker-02{
transform-box: fill-box;
transform-origin: center;
transform: scale(1);
}
#pointer path{
transform: translateY(-90px);
}
#Section04.is-animate #pointer circle.marker{
animation: pointerCircle 0.6s ease-out 1.25s forwards;
}
#Section04.is-animate #pointer path{
animation: ponterPath 0.6s ease-out 1.25s forwards;
}
#Section04.is-animate #pointer #point02 circle.marker,
#Section04.is-animate #pointer #point02 path{
animation-delay: 1.4s;
}
#Section04.is-animate #pointer #point03 circle.marker,
#Section04.is-animate #pointer #point03 path{
animation-delay: 1.55s;
}
#Section04.is-animate #pointer #point04 circle.marker,
#Section04.is-animate #pointer #point04 path{
animation-delay: 1.6s;
}
#Section04.is-animate #pointer #point05 circle.marker,
#Section04.is-animate #pointer #point05 path{
animation-delay: 1.75s;
}
#Section04.is-animate #pointer #point06 circle.marker,
#Section04.is-animate #pointer #point06 path{
animation-delay: 1.9s;
}
#Section04.is-animate #pointer #point07 circle.marker,
#Section04.is-animate #pointer #point07 path{
animation-delay: 2.05s;
}

@keyframes pointerCircle {
0%{opacity: 0;transform: scale(0);}
80%{transform: scale(1.3);}
100%{opacity: 1;transform: scale(1);}
}
@keyframes ponterPath {
0%{opacity: 0;transform: translateY(-90px);}
100%{opacity: 1;transform: translateY(0);}
}

#Section04.is-animate #pointer #point01 circle.blinkmarker-01,
#Section04.is-animate #pointer #point01 circle.blinkmarker-02{
animation: pointerBlinkmarker 2s ease-out 1.31s infinite;
}
#Section04.is-animate #pointer #point01 circle.blinkmarker-02{
animation-delay: 2.31s;
}
#Section04.is-animate #pointer #point02 circle.blinkmarker-01,
#Section04.is-animate #pointer #point02 circle.blinkmarker-02{
animation: pointerBlinkmarker 1.4s ease-out 2.0s infinite;
}
#Section04.is-animate #pointer #point02 circle.blinkmarker-02{
animation-delay: 3s;
}
#Section04.is-animate #pointer #point03 circle.blinkmarker-01,
#Section04.is-animate #pointer #point03 circle.blinkmarker-02{
animation: pointerBlinkmarker 1.4s ease-out 2.15s infinite;
}
#Section04.is-animate #pointer #point03 circle.blinkmarker-02{
animation-delay: 3.15s;
}
#Section04.is-animate #pointer #point04 circle.blinkmarker-01,
#Section04.is-animate #pointer #point04 circle.blinkmarker-02{
animation: pointerBlinkmarker 1.4s ease-out 2.2s infinite;
}
#Section04.is-animate #pointer #point04 circle.blinkmarker-02{
animation-delay: 3.2s;
}
#Section04.is-animate #pointer #point05 circle.blinkmarker-01,
#Section04.is-animate #pointer #point05 circle.blinkmarker-02{
animation: pointerBlinkmarker 1.4s ease-out 2.35s infinite;
}
#Section04.is-animate #pointer #point05 circle.blinkmarker-02{
animation-delay: 3.35s;
}
#Section04.is-animate #pointer #point06 circle.blinkmarker-01,
#Section04.is-animate #pointer #point06 circle.blinkmarker-02{
animation: pointerBlinkmarker 1.4s ease-out 2.5s infinite;
}
#Section04.is-animate #pointer #point06 circle.blinkmarker-02{
animation-delay: 3.5s;
}
#Section04.is-animate #pointer #point07 circle.blinkmarker-01,
#Section04.is-animate #pointer #point07 circle.blinkmarker-02{
animation: pointerBlinkmarker 1.4s ease-out 2.65s infinite;
}
#Section04.is-animate #pointer #point07 circle.blinkmarker-02{
animation-delay: 3.65s;
}

@keyframes pointerBlinkmarker {
0%{opacity: 0; transform: scale(1);}
60%{opacity: 0.25; transform: scale(1.9);}
100%{opacity: 0.0; transform: scale(2.2);}
}

.project__BWRX-300_group{
display: flex;
flex-direction: row;
gap: 40px;
align-items: stretch;
}
.project__BWRX-300_item{
width: calc((100% - 80px) / 4);
display: flex;
flex-direction: column;
}
.project__BWRX-300_item > .project__BWRX-300_text{
flex: 1;
}
.project__BWRX-300_item--CA{
width: calc((100% - 40px) / 2);
}
.project__BWRX-300_textColumns{
display: flex;
gap: 25px;
}
.project__BWRX-300_text{
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
}
.project__BWRX-300_textColumns .project__BWRX-300_text{
width: calc((100% - 25px) / 2);
}
.project__BWRX-300_title{
color: var(--BWRX-300_VernovaGreen);
border-bottom: 1px solid var(--Gray4);
padding-bottom: 0.3em;
}
.project__BWRX-300_image img{
max-width: 100%;
}
.collaboration__BWRX-300{
margin-top: 60px;
}
.collaboration__BWRX-300_list{
display: flex;
flex-wrap: wrap;
gap: 25px;
margin-top: 2em;
}
.collaboration__BWRX-300_item{
width: 48%;
display: flex;
gap: 20px;
/*flex: 1;*/
min-width: 0;
}
/*
.collaboration__BWRX-300_item:nth-child(2),
.collaboration__BWRX-300_item:nth-child(3){
flex: 0.85;
}
*/
.collaboration__BWRX-300_image{
flex: 2;
min-width: 0;
}
.collaboration__BWRX-300_text{
/*flex: 2;*/
flex: 5;
min-width: 0;
}
.collaboration__BWRX-300_item:nth-child(1) .collaboration__BWRX-300_text {
flex: 3.5;
}
/*
.collaboration__BWRX-300_text:nth-child(2),
.collaboration__BWRX-300_text:nth-child(3){
flex: 2.5;
}
*/
.collaboration__BWRX-300_image img{
display: block;
/*width: auto;*/
max-width: 100%;
/*max-height: 98px;
height: 100%;*/
height: auto;
}

@media screen and (max-width: 950px) {
.project__BWRX-300_item{
width: calc((100% - 80px) / 3);
}
.project__BWRX-300_bg{
order: 1;
}
.project__BWRX-300_group--upper{
order: 2;
}
.project__BWRX-300_group--bottom{
order: 3;
}
.project__BWRX-300_item--CA{
width: calc(((100% - 80px) / 3) * 2 + 40px);
}
.collaboration__BWRX-300_item{
flex-direction: column;
}
.collaboration__BWRX-300_image{
flex: none;
min-width: 0;
}
.collaboration__BWRX-300_item:nth-child(1) .collaboration__BWRX-300_image{
flex: none;
}

.collaboration__BWRX-300_text{
flex: 1;
min-width: 0;
}
.collaboration__BWRX-300_item:nth-child(1) .collaboration__BWRX-300_text{
flex: 1;
}
}

@media screen and (max-width: 768px) {
.project__BWRX-300_group{
flex-direction: column;
}
.project__BWRX-300_item{
width: 100%;
}
.project__BWRX-300_item--CA{
width: 100%;
}
.project__BWRX-300_textColumns{
flex-direction: column;
}
.project__BWRX-300_textColumns .project__BWRX-300_text{
width: 100%;
}
.project__BWRX-300_image{
margin: 0 auto;
}
.collaboration__BWRX-300_list{
flex-direction: column;
margin-top: 25px;
}
.collaboration__BWRX-300_item{
width: 100%;
flex-direction: column;
gap: 10px;
}
.collaboration__BWRX-300_image{
width: 250px;
display: flex;
margin: 0 auto;
}
.collaboration__BWRX-300_image img{
max-height: none;
}
}

/* *****************
Section 5 Related News
***************** */
#Section05 {
margin-inline: calc(50% - 50vw);
}

.RelatedNews__BWRX-300{
/*display: flex;
gap: 30px;*/
margin-bottom: 25px;
margin-left: -18px;
margin-right: -18px;
}
.RelatedNews__BWRX-300_item{
/*flex: 1;*/
margin: 0 18px;
}
.RelatedNews__BWRX-300_item_image{
border-radius: 6px 6px 0 0;
overflow: hidden;
margin-bottom: 20px;
}
.RelatedNews__BWRX-300_item_image img{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.RelatedNews__BWRX-300_item_meta{
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.RelatedNews__BWRX-300_item_meta_date{
font-size: 16px;
color: var(--Gray4);
}
.RelatedNews__BWRX-300_item_linkButton a{
border: 1px solid var(--BWRX-300_VernovaGreen);
border-radius: 9999px;
padding: 1px 20px;
transition: color .3s,background-color .3s;
}
.RelatedNews__BWRX-300_item_linkButton a:link,
.RelatedNews__BWRX-300_item_linkButton a:visited,
.RelatedNews__BWRX-300_item_linkButton a:active{
color: var(--BWRX-300_VernovaGreen);
}
.RelatedNews__BWRX-300_item_linkButton a:hover{
color: var(--White);
background-color: var(--BWRX-300_VernovaGreen);
}
.RelatedNews__BWRX-300_item_title{
font-size: clamp(18px, calc(18px + 6 * ((100vw - 768px) / 507)), 24px);
font-weight: 700;
}

@media screen and (max-width: 768px) {
.RelatedNews__BWRX-300{
flex-direction:column;
gap: 30px;
}
}

/* *****************
Section 6 Download
***************** */
#Section06{
background-color: var(--BWRX-300_VernovaGreen);
padding-bottom: 0;
position: relative;
overflow: hidden;
margin-inline: calc(50% - 50vw);
}
.Download__BWRX-300{
display: flex;
gap: 50px;
}
.Download__BWRX-300_content{
flex: 2;
min-width: 0;
}
.Download__BWRX-300_text{
font-size: 16px;
margin-bottom: 30px;
}
.Download__BWRX-300_linkButton a{
display: block;
background-color: var(--BWRX-300_ElectricLime);
font-size: 16px;
font-weight: 600;
color: var(--Gray6);
padding: 10px 50px;
transform: translateX(30px) skewX(-40deg);
width: fit-content;
transition: background-color .3s;
}
.Download__BWRX-300_linkButton a:link,
.Download__BWRX-300_linkButton a:visited,
.Download__BWRX-300_linkButton a:active{
background-color: var(--BWRX-300_ElectricLime);
}
.Download__BWRX-300_linkButton a:hover{
background-color: #d4ff96;
}
.Download__BWRX-300_linkButton a span{
display: block;
transform: skewX(40deg);
}
.Download__BWRX-300_thumbnail{
flex: 1;
min-width: 0;
display: flex;
justify-content: center;
}
.Thumbnail{
position: relative;
width: 200px;
}
.Thumbnail::before{
display: block;
content: "";
background-color: var(--BWRX-300_VernovaGreenDark);
position: absolute;
top: 50%;
left: 50%;
height: 150%;
width: 300px;
transform: translate(-50%, -50%) skewX(-40deg);
z-index: -1;
}
.Thumbnail a{
display: block;
max-width: 250px;
}
.Thumbnail a img{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}

@media screen and (max-width: 768px) {
.Download__BWRX-300_linkButton{
width: 100%;
display: flex;
justify-content: center;
transform: translateX(-30px);
}
.Download__BWRX-300{
flex-direction: column;
}
.Download__BWRX-300_content{
flex: 1;
}
.Download__BWRX-300_text{
font-size: 14px;
}
.Download__BWRX-300_thumbnail{
flex: 1;
display: flex;
justify-content: center;
padding-top: 50px;
padding-bottom: 50px;
}
.Thumbnail::before{
height: 150vh;
}
}

/* *****************
Section 7 PlugInBanner
***************** */
#Section07{
padding-bottom: 0;
}
/* *****************
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;
}
}

/*slick*/
.topicsList {
display: flex;
overflow: initial;
}
.topicsList .topicsItem {
width: 50%;
}
.topicsList .topicsContent {
position: relative;
z-index: 2;
padding-bottom: 5px;
margin: -22px auto 0 !important;
width: 86.5%;
}
.topicsList .content_inner:after {
top: 7px !important;
}

@media screen and (max-width: 767px){
.topicsList {
flex-direction: column;
gap: 20px;
}
.topicsList .topicsItem {
max-width: 100% !important;
width: 100%;
margin: 0 !important;
}
}