@charset "Shift_JIS";

@import url('https://fonts.googleapis.com/css2?family=Noto+Selif+JP:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* CSS Document */
body{
background-color: #FFF;
}
#TopicPath{
display: none;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
#Contents,
#Contents *{
box-sizing: border-box;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.showSP{
display: none;
}

/* KV section */
.sectionKVWrapper{
background-color: #FFF;
}
.sectionKV{
width: 100%;
max-height: 574px;
height: 574px;
background-color: #FFF;
position: relative;
overflow: hidden;
}
.kvTitle{
max-width: 1090px;
max-height: 320px;
width: 100%;
height: 100%;
position: absolute;
left: 50%;
transform: translate(-50%,0);
opacity: 1;
bottom: 36px;
z-index: 3;
}
.kvTitleMOVE,
.KVTitleFORWARD{
font-family: "Barlow", sans-serif;
font-size: 150px;
line-height: 150px;
line-height: 1.5em;
font-weight: 900;
color: #1e1e1e;
-webkit-text-stroke: 2px #FFF;
position: absolute;
opacity: 0;
}
.kvTitleMOVE{
top: -70px;
left: 0;
animation: titleinM 1s ease-out 2s forwards;
}
.KVTitleFORWARD{
bottom: -50px;
right: 0;
animation: titleinF 1s ease-out 2.5s forwards;
}

@keyframes titleinM{
from{ opacity: 0; top: 0;}
to{ opacity: 1; top: -70px;}
}

@keyframes titleinF{
from{ opacity: 0; bottom: -120px; }
to{ opacity: 1; bottom: -70px;}
}

@media screen and (max-width:1100px){
.kvTitle{
width: calc(100% - 30px);
}
.kvTitleMOVE,
.KVTitleFORWARD{
font-family: "Barlow", sans-serif;
font-size: 130px;
}
}

.kvScrollImage{
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
z-index: 2;
}
.kvScrollImage img{
display: inline-block;
height: 530px;
vertical-align: top;
filter: blur(6px);
opacity: 0;
transform: scale(1.2);
animation: blurin 1s ease-out 1s forwards;
}

@keyframes blurin{
from{
transform: scale(1.2);
opacity: 0;
filter: blur(6px);
}
to{
transform: scale(1);
opacity: 1;
filter: blur(0);
}
}

@media screen and (max-width:1100px){
.sectionKV{
width: 100%;
max-height: 420px;
height: 420px;
}
.kvTitle img{
width: 90vw;
height: auto;
}
.kvScrollImage img{
height: 420px;
}
}

@media screen and (max-width:800px){
.sectionKV{
width: 100%;
max-height: 400px;
height: 400px;
}
.kvScrollImage img{
height: 400px;
}
}

@media screen and (max-width:767px){
.sectionKV{
width: 100%;
max-height: 340px;
height: 340px;
}
.kvTitle{
max-height: 340px;
}
.kvTitleMOVE{
font-size: 70px;
}
.KVTitleFORWARD{
font-size: 70px;
}

@keyframes titleinM{
from{ opacity: 0; top: 100px;}
to{ opacity: 1; top: -20px;}
}

@keyframes titleinF{
from{ opacity: 0; bottom: -120px;}
to{ opacity: 1; bottom: -20px;}
}

.kvTitle{
position: relative;
top: 50%;
left: 50%;
width: calc(100% - 30px);
transform: translate(-50%,-50%);
}
.kvScrollImage{
top: 14px;
}
.kvScrollImage img{
display: inline-block;
height: 280px;
}
}

/* lead section */
.sectionlead{
border-bottom: 1px solid #1e1e1e;
padding: 38px 145px 100px;
margin-bottom: 100px;
}
.sectionlead .TextStyle1{
/*font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;*/
font-size: 20px;
line-height: 1.7em;
font-weight: 800;
color: #1e1e1e;
}
.sectionlead .TextStyle1:first-child{
margin-bottom: 2em;
}

@media screen and (max-width:900px){
.sectionlead{
border-bottom: 1px solid #1e1e1e;
padding: 38px 90px 100px;
}
}

/* section Article Index */
.articleCard{
display: flex;
height: 538px;
position: relative;
margin-bottom: 65px;
}
.articleCardContainer{
width: 50%;
position: relative;
z-index: 1;
padding-top: 50px;
pointer-events: none;
}
.articleCardHeader{
display: flex;
align-items: baseline;
gap: 10px;
padding-bottom: 80px;
}
.articleCardNumber{
font-family: "Barlow", sans-serif;
font-size: 100px;
line-height: 1.5em;
font-weight: 400;
color: #1e1e1e;
}
.articleCardMeta{
/*font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;*/
font-size: 16px;
font-weight: 600;
color: #1e1e1e;
position: relative;
padding-left: 22px;
}
.articleCardMeta::before{
content: "��";
display: block;
color: #b1000e;
margin-right: 0;
position: absolute;
top: 0;
left: 0;
}
.articleCardIntro{
/*font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;*/
font-size: 16px;
line-height: 28px;
font-weight: 600;
color: #1e1e1e;
margin-bottom: 1.2em;
text-shadow:
  1px 1px 0px #FFF, -1px -1px 0px #FFF,
 -1px 1px 0px #FFF,  1px -1px 0px #FFF,
  1px 0px 0px #FFF, -1px  0px 0px #FFF,
  0px 1px 0px #FFF,  0px -1px 0px #FFF;
position: relative;
}
.articleCardIntro::after{
display: block;
content: "";
background-color: rgba(255,255,255,0.5);
border-radius: 10px;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
z-index: -1;
}
.articleCardReadMore a{
width: fit-content;
height: 53px;
display: block;
pointer-events: all;
}
.btnSeeMore{
cursor: pointer;
transition: all .4s;
}
.path{
fill: #FFFFFF;
stroke: #B1000E;
stroke-miterlimit: 10;
transition: all .4s;
}
.textSeeMore{
fill: #B1000E;
/*font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;*/
font-size: 18px;
font-weight: 600;
transition: all .3s;
}
.articleCardReadMore a:hover .btnSeeMore{
margin-left: 20px;
}
.btnSeeMore:hover .path{
fill: #B1000E;
stroke: #B1000E;
}
.btnSeeMore:hover .textSeeMore{
fill: #FFF;
}
.articleCardImage{
width: 70%;
height: 538px;
position: absolute;
right: 0;
z-index: 0;
margin-right: -7.8%;
max-width: 830px;
overflow: hidden;
}
.articleCardImageSP{
display: none;
position: relative;
margin-bottom: 15px;
pointer-events: auto;
cursor: pointer;
}
.articleTitle{
/*font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;*/
font-size: 40px;
line-height: 1.5em;
font-weight: 600;
color: #1e1e1e;
letter-spacing: -0.02em;
writing-mode: vertical-rl;
position: absolute;
z-index: 1;
user-select: none;
transition: all .3s;
}
.articleCard:nth-child(even) .articleCardHeader{
flex-direction: row-reverse;
}
.articleCard:nth-child(even) .articleCardReadMore{
text-align: right;
}
.articleCard:nth-child(even)  .articleCardReadMore a{
margin-left: auto;
margin-right: 0;
}
.articleCard:nth-child(even) .btnSeeMore{
margin-left: 0;
margin-right: 20px;
}
.articleCard:nth-child(even) .articleCardReadMore a:hover .btnSeeMore{
margin-left: 20px;
margin-right: 0;
}
.articleCard:nth-child(even){
display: flex;
flex-direction: row-reverse;
}
.articleCard:nth-child(even) .articleCardImage{
right: auto;
left: 0;
margin-right: auto;
margin-left: -7.8%;
}
.articleCard:nth-child(odd) .articleCardImage .articleTitle{
right: 140px;
top: 0;
}
.articleCard:nth-child(even) .articleCardImage .articleTitle{
left: 140px;
top: 0;
}
.articleCardImage img{
width: 100%;
height: auto;
cursor: pointer;
}

@media screen and (max-width:1500px){
.articleCardImage{
margin-right: -3.9%;
}
.articleCard:nth-child(even) .articleCardImage{
margin-right: auto;
margin-left: -3.9%;
}
}

@media screen and (max-width:1400px){
.articleCardImage{
margin-right: -1.9%;
}
.articleCard:nth-child(even) .articleCardImage{
margin-right: auto;
margin-left: -1.9%;
}
}

@media screen and (max-width:1375px){
.articleCardImage{
margin-right: 0;
}
.articleCard:nth-child(even) .articleCardImage{
margin-right: 0;
margin-left: 0;
}
}

@media screen and (max-width:1100px){
.articleTitle{
font-size: 32px;
}
.articleCard:nth-child(odd) .articleCardImage .articleTitle{
right: 120px;
}
.articleCard:nth-child(even) .articleCardImage .articleTitle{
left: 120px;
}
}

@media screen and (max-width:980px){
.articleTitle{
font-size: 26px;
}
}

.articleCardImageSP .articleTitle{
top: 0;
font-size: 20px;
font-weight: 700;
text-align: left;
}
.articleCard:nth-child(odd) .articleCardImageSP .articleTitle{
right: 24px;
}
.articleCard:nth-child(even) .articleCardImageSP .articleTitle{
left: 24px;
}

/* others section */
.sectionOthers{
border-bottom: 1px solid #1e1e1e;
padding: 100px 0;
margin-bottom: 100px;
}
.OthersH2{
background-image: none;
}
.OthersH2 span{
font-family: "Barlow", sans-serif;
font-size: 100px;
line-height: 1.5em;
font-weight: 400;
color: #1e1e1e;
padding: 10px 0;
background-color: transparent;
}
.othersColumnSet{
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 60px;
}
.othersColumn{
grid-column: span 4;
cursor: pointer;
}
.othersColumn .ImgOnlyStyle{
margin-bottom: 2px;
}
.othersColumn .ImgOnlyStyle img{
border-radius: 10px;
transition: all .3s;
}
.othersColumn:hover .ImgOnlyStyle img{
opacity: 0.7;
}
.othersColumn .ImgOnlyStyle+.linkText{
font-size: 16px;
line-height: 1.5em;
font-weight: 600;
}
.othersColumn .linkText a{
color: #1e1e1e;
text-decoration: none;
position: relative;
padding-left: 24px;
padding-right: 40px;
display: block;
}
.othersColumn .linkText a::before{
content: "��";
display: block;
margin-right: 6px;
font-size: 16px;
color: #b1000e;
position: absolute;
top: 0;
left: 2px;
}
.othersColumn .linkText a::after{
content: "";
display: block;
width: 33px;
height: 10px;
position: absolute;
top: 6px;
right: 4px;
background: url(/products/energy/nuclear/people/image/index/others_arrow.svg) no-repeat;
}
.otherMeta{
display: flex;
flex-wrap: wrap;
}
/*.otherMeta span{
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}*/

/* link section */
.sectionLinks{
margin-bottom: 150px;
}
.nuclearLinkColumnSet{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 55px;
}

/* 1 */
.nuclearLinkColumnSet .columnFull{
grid-column: span 2;
position: relative;
overflow: hidden;
background: url(/products/energy/nuclear/people/image/index/link_nuclear_01.png) no-repeat;
background-size: cover;
border-radius: 10px;
}

/* 1/2 */
.nuclearLinkColumnSet .columnLeft01,
.nuclearLinkColumnSet .columnRight01{
grid-column: span 1;
}

.nuclearLinkColumnSet .columnLeft01{
background: url(/products/energy/nuclear/people/image/index/link_nuclear_02.png) no-repeat;
background-size: cover;
border-radius: 10px;
}
.nuclearLinkColumnSet .columnRight01{
background: url(/products/energy/nuclear/people/image/index/link_nuclear_03.png) no-repeat;
background-size: cover;
border-radius: 10px;
}
.nuclearLinkColumnSet .linkImg img{
max-width: 100%;
height: auto;
border-radius: 10px;
}
.linkStyle01{
position: relative;
padding: 76px 60px;
z-index: 2;
outline: 1px solid #F00;
}
.nuclearLinkColumnSet .linkStyle01::after{
position: absolute;
content: "";
display: block;
width: 720px;
height: 300px;
left: -150px;
top: 0;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
transform: skewX(-40deg);
}
.linkStyle01 a{
position: relative;
font-size: 40px;
line-height: 1em;
padding-right: 160px;
z-index: 2;
padding-top: 0.2em;
/*font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;*/
font-weight: 500;
}
.linkStyle01 a,
.linkStyle01 a:link,
.linkStyle01 a:visited,
.linkStyle01 a:active,
.linkStyle02 a,
.linkStyle02 a:link,
.linkStyle02 a:visited,
.linkStyle02 a:active{
color: #FFF;
text-decoration: none;
}

.linkStyle01 a span{
color: #FFF;
text-decoration: none;
}
.linkStyle01 a::after{
display: block;
content: "";
width: 70px;
height: 21px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: url(/products/energy/nuclear/people/image/index/link_01_arrow.svg) no-repeat;
}
.linkStyle02{
display: block;
padding: 48px 38px 51px 40px;
cursor: pointer;
}
.linkStyle02 a{
width: 100%;
height: 100%;
max-width: 532px;
max-height: 91px;
padding: 40px 26px 40px 40px;
background-color: #e61738;
clip-path: polygon(
    100% 73.3%, 
    100% 0%, 
    4.17% 0%, 
    0% 24.3%, 
    0% 100%, 
    95.4% 100%
  );
display: flex;
gap: 20px;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto;
/*font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;*/
font-weight: 500;
}
.linkStyle02 span:nth-child(1){
font-size: 32px;
}
.linkStyle02 span:nth-child(2){
font-size: 20px;
}
.linkStyle02 span:nth-child(2) img{
padding-top: 5px;
padding-left: 20px;
}

@media screen and (max-width:1300px){
.linkStyle02 a{
flex-direction: column;
justify-content: left;
align-items: normal;
gap: 10px;
padding: 20px 26px 20px 40px;
}
}

@media screen and (max-width:1100px){
/** others **/
.sectionOthers{
padding-top: 0;
}
.OthersH2 span{
font-size: 50px;
font-weight: 500;
}
.othersColumn .linkText a{
font-size: 12px;
line-height: 1.5em;
padding-left: 14px;
}
.othersColumnSet{
gap: 17px 5px;
}
.othersColumn{
grid-column: span 6;
display: flex;
flex-direction: column;
}
.othersColumn .ImgOnlyStyle,
.othersColumn .linkText{
margin: 0 auto;
max-width: 385px;
width: 100%;
}
.othersColumn .linkText a::before{
font-size: 10px;
}
.nuclearLinkColumnSet{
gap: 30px;
}
}

@media screen and (max-width:980px){
.linkStyle02 a{
padding: 20px 26px 20px 26px;
}
.linkStyle02 span:nth-child(1){
font-size: 24px;
}
.linkStyle02 span:nth-child(2){
font-size: 16px;
}
}
@media screen and (max-width:900px){
.nuclearLinkColumnSet{
gap: 20px;
}
.linkStyle02{
display: block;
padding: 28px 18px 31px 20px;
}
}

/* hitachi kaze */
.hitachiKaze{
width: 100%;
background-image: url(/products/energy/nuclear/people/image/index/index_hitachikaze_bg.png);
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 60px;
}
.hitachiKazeInner{
max-width: 1335px;
margin: 0 auto;
padding: 60px 25px 43px;
}
.hitachiKazeInner div img{
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
}

/*******************************************/
@media screen and (max-width:767px){
.JS h2{
margin: 0 0 5px;
}
.showSP{
display: block;
}
.hideSP{
display: none;
}
#TopicPath{
display: block;
}
.sectionKVWrapper{
padding: 50px 0;
}
.sectionlead{
padding: 0 0 100px;
}
.sectionlead .TextStyle1{
font-size: 16px;
}
/** article card **/
.articleCard{
flex-direction: column;
height: auto;
}
.articleCardBody{
margin-top: 5px;
}
.articleCardContainer{
width: 100%;
padding-top: 0;
}
.articleCardHeader{
position: absolute;
top: 0;
left: 0;
z-index: 10;
align-items: end;
}
.articleCard:nth-child(even) .articleCardHeader{
left: auto;
right: 0;
}
.articleCardNumber{
font-size: 60px;
line-height: 60px;
}
.articleCardMeta{
font-size: 12px;
padding-bottom: 4px;
padding-left: 15px;
}
.articleCardImage{
display: none;
}
.articleCardImageSP{
display: block;
}
.articleCard:nth-child(odd) .articleCardImageSP{
margin-right: -15px;
text-align: right;
}
.articleCard:nth-child(even) .articleCardImageSP{
margin-left: -15px;
}
.JS #Contents .articleCardImageSP img{
max-width: none;
width: 100%;
}
.articleCardReadMore a svg{
width: 125px;
height: 39px;
}

/** link section **/
.sectionLinks {
margin-bottom: 0;
}
.nuclearLinkColumnSet .columnLeft01,
.nuclearLinkColumnSet .columnRight01{
grid-column: span 2;
}
.linkStyle01{
height: 120px;
padding: 0;
}
.linkStyle01 a{
font-size: 20px;
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
width: 350px;
}
.linkStyle01 a span{
padding-left: 20px;
}
.linkStyle01 a::after{
position: static;
top: auto;
right: auto;
width: 35px;
height: 10.5px;
background-size: 100%;
margin-left: 20px;
}
.nuclearLinkColumnSet .linkStyle01::after{
position: absolute;
content: "";
display: block;
width: 432px;
height: 180px;
left: -246px;
}
.linkStyle02{
padding: 17px 16px;
}
.linkStyle02 a{
flex-direction: row;
gap: 10px;
padding: 20px 14px;
}
.linkStyle02 span:nth-child(1){
font-size: 16px;
width: 84px;
}
.linkStyle02 span:nth-child(2){
font-size: 12px;
width: calc(100% - 94px);
display: flex;
justify-content: space-between;
}
.JS #Contents .linkStyle02 span:nth-child(2) img{
padding-top: 0;
max-width: 35px;
}
.hitachiKazeInner{
padding: 0;
}
}

@media screen and (max-device-width:767px){
.linkStyle01 a{
width: auto;
}
}