@charset "Shift_JIS";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');

/* CSS Document */


/* ---------------------------------------------------------

	共通昊定

--------------------------------------------------------- */
.pcOnly { display: block; }
.spOnly { display: none; }
.taR { text-align: right!important; }
body.hydrogenPage { background-color: #ffffff; }
/*.hydrogenPage .GridSet { max-width: 100%!important; }*/
/*#HeaderArea1 #SupportNavi {
max-width: calc(100% - 105px);
margin-left: 10px;
}*/
h1 a#body:hover{
color: #FFF;
cursor: default;
}
/* ---------------------------------------------------------

	トップペ拏ジ

--------------------------------------------------------- */
/* ブランディングエリア */
.brandingCatch {
  font-weight: bold;
  font-size: 20px;
  color: #333333;
  line-height: 200%;
}

/* ---------------------------------------------------------

	news_topics_area

--------------------------------------------------------- */
.news_topics_are { padding: 0 0 80px 0; }
.news_topics_are_in {
  width: 100%;
  max-width: 1305px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}
.news_list {
  width: 100%;
  margin-bottom: 25px;
}
.news_list:last-child { margin-bottom: 0; }
.news_list dt {
  margin-bottom: 10px;
  vertical-align: top;
  font-size: 14px;
  line-height: 130%;
}
.news_list dd {
  display: table-cell;
  vertical-align: top;
  line-height: 120%;
}
.news_list dd .LinkListStyle1 { margin-bottom: 0; }
.news_ymd {
  display: inline-block;
  padding-right: 10px;
}

/*hydrogen products*/
.relatedinfo_icon01 {
  border: 1px solid #cc0022;
  color: #cc0022;
  display: inline-block;
  font-size: 83%;
  line-height: 1;
  margin-left: 0;
	margin-bottom: 5px;
  padding: 4px 15px 3px;
  position: relative;
  top: -1px;
  vertical-align: middle;
}

/* 4ブ・ック・ニュ拏エリア */
.menu4Block {
  width: 100%;
  max-width: 1275px;
  margin: 0 auto;
  padding-top: 40px;
}
.menu4Block.firstBlock { padding-top: 0; }
.menu4Block .col {
  position: relative;
  display: block;
  float: left;
  width: 25%;
  height: 208px;
  border-left: solid 1px #ffffff;
  box-sizing: border-box;
}
.menu4Block .col::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,0255,255,0.2);
  opacity: 0;
}
.menu4Block .col .menuTextArea {
  position: absolute;
  left: 0;
  bottom: 0;
  display: table;
  width: 100%;
  height: 74px;
  background-color: rgba(0,0,0,0.7);
}
.menu4Block .col .menuTextArea span {
  display: table-cell;
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 17px;
  color: #ffffff;
  line-height: 130%;
}


/* 関連リンク */
.relatedArea {
  width: 100%;
  margin-bottom: 100px;
  padding: 80px 0 65px 0;
  background: #f9f9f9 url("/products/energy/hydrogen/image/bg_related.png") top center;
  background-size: cover;
}
.relatedList li {
  float: left;
  width: 24.235294117%;
  margin-right: 1.019607843%;
  margin-bottom: 15px;
  background-color: #333333;
  cursor: pointer;
}
.relatedList li img {
  width: 100%;
  height: auto;
  transition: 0.2s;
}
.relatedLinkText {
  padding: 10px;
  font-size: 14px;
  color: #ffffff;
  line-height: 150%;
}

.OptionWideRWD #Contents .relatedList.bannerLinkList img{
height: 100%;
width: 100%;
display: block;
object-position: center;
object-fit: cover;
}
.OptionWideRWD #Contents .relatedList.bannerLinkList li.imgPosRight img{
object-position: right;
}

/* ---------------------------------------------------------

	共通

--------------------------------------------------------- */
/* ガイドラインスタイル昴搗き */
/*.hydrogenPage #Contents { padding: 30px 0 0 0!important; }
.hydrogenPage .GridSet {
  width: auto!important;
  margin: 0!important;
}
.hydrogenPage .GridSet .Grid4 { padding: 0!important; }*/

/* Section */
.hydrogenSectionSub1 {
  max-width: 995px;
  width: 100%;
  margin: 0 auto 100px auto;
  padding: 0 15px;
  box-sizing: border-box;
}
.hydrogenSectionSub2 {
  max-width: 995px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}
.hydrogenSectionSub3 {
  max-width: 995px;
  width: 100%;
  margin: 70px auto 50px auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Title */
.hydrogenTtile1 {
  position: relative;
  margin: 0 0 50px 0!important;
  padding-bottom: 5px;
  border-bottom: solid 7px #828282;
  background: none;
}
.hydrogenTtile1 span {
  padding: 0;
  background: none;
  font-size: 29px;
  font-weight: bold;
  color: #000000;
  line-height: 130%;
}
.hydrogenTtile1 span::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 80px;
  height: 7px;
  background-color: #ea2d4b;
  font-size: 0;
}

/* text */
.hydrogenText01 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #333333;
  line-height: 160%;
}
.hydrogenNotes {
  margin-top: 10px;
  font-size: 16px;
  line-height: 120%;
}

/* image */
img.imgBorder {
  border: solid 1px #cccccc;
  background-color: #ffffff;
  box-sizing: border-box;
}
img.imgSizeFree {
  max-width: 100%;
  height: auto;
}
.imgCaption {
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  line-height: 120%;
}

.onlyImageSet2 { text-align: center; }
.onlyImageSetCap {
  padding-top: 65px;
  text-align: center;
}

.imgLargeLink {
    margin-top: 7px;
    text-align: center;
}
.imgLargeLink a {
    padding-right: 18px;
    background: url("/image/jp/r1/icon/icon_new_window_hd.gif") right center no-repeat;
    background-size: 16px 16px;
    text-decoration: underline;
    font-size: 16px;
}

/* ---------------------------------------------------------

	配下ペ拏ジ

--------------------------------------------------------- */
/* Branding area */
#subBranding {
  position: relative;
  width: 100%;
  height: 295px;
}
#subBranding::before {
  content: "";
  position: absolute;
  left: -8%;
  top: 0;
  z-index: 10;
	width: 58%;
	height: 100%;
	transform: skewX(8deg);
	background: rgba(0,0,0,0.3);
}
#subBranding #subBrandingInner {
  display: table;
  max-width: 1305px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}
#subBranding #subBrandingInner .col {
  display: table-cell;
  vertical-align: middle;
}
#subBranding #subBrandingInner .col .h1Title {
  position: relative;
  z-index: 20;
  font-family: '游ゴシック体',YuGothic,'游ゴシック','Yu Gothic','・イリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif;
  font-size: 45px;
  font-weight: bold;
  color: #ffffff;
  line-height: 120%;
}


/* Blocked area */
.grayAreaSub {
  width: 100%;
  margin-bottom: 100px;
  padding: 50px 0 0 0;
  border-bottom: solid 1px transparent;
  background-color: #f9f9f9;
  box-sizing: border-box;
}
.textImageSetRv .col1 {
  float: right;
  width: 48.1865284%;
  text-align: center;
}
.textImageSetRv .col2 {
  float: left;
  width: 48.1865284%;
}
.imgOnlyBox { padding-bottom: 50px; }
.imgOnlyBox img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------

	clearFix

--------------------------------------------------------- */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
*:first-child+html .clearfix { zoom: 1; }

/* ---------------------------------------------------------

	04 hydrogen

--------------------------------------------------------- */

/*04 hydrogen*/
#subBranding.hydrogenPage {
  background: url("/products/energy/hydrogen/image/sub_branding.png") center center no-repeat;
  background-size: cover;
}
/*.menuImage04_01 {
  background: url("/products/energy/hydrogen/image/img_menu04_01.jpg") center top no-repeat;
  background-size: cover;
}
.menuImage04_02 {
  background: url("/products/energy/hydrogen/image/img_menu04_02.jpg") center top no-repeat;
  background-size: cover;
}
.menuImage04_03 {
  background: url("/products/energy/hydrogen/image/img_menu04_03.jpg") center top no-repeat;
  background-size: cover;
}
.menuImage04_04 {
  background: url("/products/energy/hydrogen/image/img_menu04_04.jpg") center top no-repeat;
  background-size: cover;
}*/
/*04-01 hydrogen hydrogen_energy*/
#subBranding.hydrogen_04_01Page {
  background: url("/products/energy/hydrogen/image/sub_branding_04_01.png") center center no-repeat;
  background-size: cover;
}
/*04-02 hydrogen products*/
#subBranding.hydrogen_04_02Page {
  background: url("/products/energy/hydrogen/image/sub_branding_04_02.png") center center no-repeat;
  background-size: cover;
}
.menu4Block .col.img04_02_01{
  width: 100%;
  height: 350px;
}

.img04_02_01 {
  background: url("/products/energy/hydrogen/image/img_04_02_01.png") center top no-repeat;
  background-size: cover;
}
.relatedImage04_02_01 {
  background: url("/products/energy/hydrogen/image/img_related04_02_01.jpg") center top no-repeat;
  background-size: cover;
}
.relatedImage04_02_02 {
  background: url("/products/energy/hydrogen/image/img_related04_02_02.png") center top no-repeat;
  background-size: cover;
}
.relatedImage04_02_03 {
  background: url("/products/energy/hydrogen/image/img_related04_02_03.png") center top no-repeat;
  background-size: cover;
}
/*04-03 r&d*/
#subBranding.hydrogen_04_03Page {
  background: url("/products/energy/hydrogen/image/sub_branding_04_03.png") center center no-repeat;
  background-size: cover;
}
.menuImage04_03_01 {
  background: url("/products/energy/hydrogen/image/img_menu04_03_01.png") center top no-repeat;
  background-size: cover;
}
.menuImage04_03_02 {
  background: url("/products/energy/hydrogen/image/img_menu04_03_02.png") center top no-repeat;
  background-size: cover;
}
.menuImage04_03_03 {
  background: url("/products/energy/hydrogen/image/img_menu04_03_03.png") center top no-repeat;
  background-size: cover;
}
/*04-04 hydrogen location*/
#subBranding.hydrogen_04_04Page {
  background: url("/products/energy/hydrogen/image/sub_branding_04_04.png") center center no-repeat;
  background-size: cover;
}
.LinkListStyle1.locationLinkStyle1 {
  display: inline-block;
}

/* ---------------------------------------------------------

	hydrogen animation

--------------------------------------------------------- */
.palaxbox {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 965px;
  display: flex;
  flex-flow: row wrap;
  padding-bottom: 60px;
}
.boxText{
  position: absolute;
  top: 50%;
  transform: translate3d(0,-50%,0);
  width: 100%;
  z-index: 2;
}
.txt-mask {
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
}
.txt-mask.show{
  animation-name: textMaskSlideIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes textMaskSlideIn {
from {
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
}
to {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  }
}
.txt-mask p.text1{
  font-size: 22px;
  font-weight: bold;
  padding-left: -17px;
  padding-right: -17px;
  display: inline-block;
}
.palaxboxCol{
  flex-basis: 50%;
  position: relative;
	height: 380px;
}
.palaxboxCol:last-child{
  flex-basis: 50%;
}
.mdash-mask {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  display: block;
}
.mdash-mask.show {
  animation-name: mdashFadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes mdashFadeInAnime{
25% {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
100% {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
}
.redline{
  color: #c3002f;
}
.img-wrap{
  position: relative;
  height: 100%;
  width: 100%;
}
.bg-red{
  position: absolute;
  background: #c3002f;
  left: 31px;
  bottom: -31px;
  width: 0px;
  height: 31px;
}
.bg-red.show{
  animation-name: bgredFadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}
@keyframes bgredFadeInAnime{
from {
  width: 0px;
}
to {
  width: calc(100% - 62px);
}
}
.img-mask {
  top: 0;
  left: 0;
  position: absolute;
  width: calc(100% - 17px);
  height: 100%;
  overflow: hidden;
  width: 100%;
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
}
.img-wrap>div {
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  position: absolute;
  transform: scale(1.5);
  bottom: 0;
  left: 0;
  height: 120%;
  width: 100%;
}
.img-wrap>div.show{
  animation-name: bgImgSlideIn;
  animation-duration: 1.6s;
  animation-fill-mode: forwards;
}
@keyframes bgImgSlideIn{
from {
  transform: scale(1.5);
}
to {
  transform: scale(1);
}
}
.img-mask.show{
  animation-name: imgMaskSlideIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes imgMaskSlideIn{
from {
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
}
to {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
}
@media screen and (max-width: 767px) {
.palaxbox {
  display: block;
}
.palaxboxCol {
  height: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}
.palaxboxCol:last-child {
  height: auto;
  padding-bottom: 200px;
}
.boxText{
  position: static;
  transform: none;
}
.txt-mask p.text1{
  font-size: 20px;
}
.bg-red {
  display: none;
}
.img-wrap>div {
  height: 300px;
}
}

/* ---------------------------------------------------------

	index menu link

--------------------------------------------------------- */
.hydrogenMenu {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px 3%;
  width: 100%;
}


.hydrogenMenuColumn {
  position: relative;
  flex-basis: 32%;
}
.hydrogenMenuColumn a,
.hydrogenMenuColumn a:visited,
.hydrogenMenuColumn a:hover {
  text-decoration: none;
}
.hydrogenMenuImage {
  position: relative;
  bottom: -20px;
  z-index: 2;
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.hydrogenMenuImage img{
  transition: all .2s ease-out;
  width: 100%;
}

.hydrogenMenuTitle {
  position: relative;
  display: block;
/*  padding: 35px 10px 25px 13px;*/
  padding: 35px 8px 15px 8px;
  color: #ffffff;
  border-bottom: 10px solid #363333;
  background-color: #040000;
}
.hydrogenMenuTitle span {
  font-size: 20px;
  font-weight: bold;
  display: block;;
}
.hydrogenMenuColumn:hover .hydrogenMenuImage img {
  transform: scale(1.2);
}
.hydrogenMenuColumn:hover .hydrogenMenuTitle {
  background-color: #b1000e;
  border-bottom: 10px solid #7b0001;
}
@media screen and (max-width: 767px){

}