@charset "UTF-8";


/*  ANIMATION
**************************************************************/
.sa {
  opacity: 0;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.sa.show {
  opacity: 1;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}
.sa--up {
  -webkit-transform: translate(0, 100px);
      -ms-transform: translate(0, 100px);
          transform: translate(0, 100px);
}
.sa--lr {
  -webkit-transform: translate(-100px, 0);
      -ms-transform: translate(-100px, 0);
          transform: translate(-100px, 0);
}

@-webkit-keyframes border_anim {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

@keyframes border_anim {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

@-webkit-keyframes bgSize {
  0% {background-size: 100% 0.18em, 0 0.18em;}
  100% {background-size: 0 0.18em, 100% 0.18em;}
}

@keyframes bgSize {
  0% {background-size: 100% 0.18em, 0 0.18em;}
  100% {background-size: 0 0.18em, 100% 0.18em;}
}

@-webkit-keyframes bgSize2 {
  0% {background-size: 100% 5px, 0 5px;}
  100% {background-size: 0 5px, 100% 5px;}
}

@keyframes bgSize2 {
  0% {background-size: 100% 5px, 0 5px;}
  100% {background-size: 0 5px, 100% 5px;}
}

/* ====== Header ======= */
#hy_header {
  background: -o-linear-gradient(left,#fff 0%,#fff 50%,#004098 50%,#004098 100%);
  background: -webkit-gradient(linear,left top, right top,from(#fff),color-stop(50%, #fff),color-stop(50%, #004098),to(#004098));
  background: linear-gradient(to right,#fff 0%,#fff 50%,#004098 50%,#004098 100%);
  background-color: #fff;
  border-radius: 0;
}
#hy_header .hy_header_wrap {
  margin: auto;
}
#hy_header .hy_header_nav_wrap {
  background-image: -o-linear-gradient(left, #215BBA , #004098);
  background-image: -webkit-gradient(linear, left top, right top, from(#215BBA) , to(#004098));
  background-image: linear-gradient(to right, #215BBA , #004098);
}

@media print, screen and (min-width: 768px) {
  #hy_header .hy_header_nav_wrap {
    margin-top: 0;
  }
}
@media screen and (max-width:767px) {
  #hy_header {
    background: #fff;
  }
  #hy_header_hamburger {
    top: 0;
    right: 0;
    background-color: #215BBA;
  }
  #hy_header_hamburger a {
    width: 60px;
    padding: 21px 9px 20px;
  }
  #hy_header .hy_header_logo_wrap .hy_header_logo {
    margin-right: 15px;
  }
}

body {
  min-width: 100%;
}

.wrap {
  min-width: 100%;
}

/* ====== Link ======= */
.sec_inner {
  margin: 0 auto;
}
.link_area .sec_inner {
  max-width: 1400px;
}
@media only screen and (min-width: 769px) and (max-width: 1620px) {
  .sec_inner {
    padding: 0 20px;
  }
}

@media print, screen and (min-width: 768px) {
  .sec_inner {
    max-width: 1620px;
  }
}
@media screen and (max-width:767px) {
  .sec_inner {
    padding: 0 5.333vw;
  }
  .link_area .sec_inner {
    max-width: 100%;
  }
}


/* ====== mainvisual ======= */
.mainvisual_area {
  position: relative;
  padding-top: 90px;
}

.mainvisual_area .mv_img img {
  width: 100%;
  max-width: 100%;
}

.mainvisual_area .mv_ttl_wrap {
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.mainvisual_area .mv_ttl {
  color: #fff;
  font-size: 125px;
  font-family: 'Akshar', sans-serif;
  line-height: 1.2;
  letter-spacing: 5px;
}

.mainvisual_area .mv_read {
  width: 330px;
  margin: 0 auto;
  padding: 8px 10px 9px 10px;
  background: rgb(10,151,222);
  background: -o-linear-gradient(left, rgba(10,151,222,1) 0%, rgba(33,91,186,1) 100%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(10,151,222,1)), to(rgba(33,91,186,1)));
  background: linear-gradient(90deg, rgba(10,151,222,1) 0%, rgba(33,91,186,1) 100%);
  color: #fff;
  font-size: 23px;
  font-weight: normal;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  line-height: 1;
}

@media screen and (max-width:767px) {
  .mainvisual_area {
    padding-top: 62px;
    z-index: 9;
  }
  .mainvisual_area .mv_ttl_wrap {
    top: 55%;
    padding: 0 2.667vw;
  }
  .mainvisual_area .mv_ttl {
    font-size: 14.073vw;
    line-height: 1;
  }
  .mainvisual_area .mv_read {
    width: 46vw;
    margin-right: 0.800vw;
    padding: 1.333vw;
    font-size: 3.07vw;
  }
}

.sec_inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1620px;
}

#page_top {display: none !important;}

/* ====== section01 ======= */
#section01 {
  position: relative;
}

#section01::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/jpn/hydrogenfuelcellship/structure/images/bg_bubbles.jpg) no-repeat center;
  content: '';
  background-size: cover;
  background-attachment: fixed;
}
@media screen and (max-width:767px) {
  #section01 .sec_inner {
    padding: 0 0;
  }
  #section01::before {
    background: url(/jpn/hydrogenfuelcellship/structure/images/bg_bubbles_sp.jpg) no-repeat top;
    background-size: cover;
    background-attachment: fixed;
  }
}

/* ====== fuelship ======= */
.fuelship {
  position: relative;
  color: #215BBA;
  text-align: center;
}
.fuelship_bg {
  position: static !important;
  top: initial !important;
  left: initial !important;
  z-index: 0;
  width: 100%;
  height: 768px;
  padding: 25px 0 50px;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  max-width: 100%;
}
.fuelship_bg img {
  max-width: 100%;
}
.fuelship h2 {
  position: relative;
  z-index: 1;
  padding: 200px 0 0;
  font-size: 40px;
}
.txt_content {
  position: relative;
  z-index: 2;
}
.fuelship .txt_content p {
  font-size: 18px;
  font-weight: 600;
  line-height: 2.2;
}
/* <!-- video_block --> */
.fuelship .video_block .youtube_thum {
  width: 100%;
  max-width: 930px;
}
.video_block .youtube_thum img {
  width: 100%;
}
/* <!-- img_block --> */
.img_block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 1;
  width: 1036px;
  margin: 48px auto 0;
  max-width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}
.img_block li {
  width: calc((100% - 196px) / 3);
}
.img_block li img {
  width: 100%;
  -webkit-box-shadow: 6px 6px 10px 0px rgba(0,0,0,0.3);
box-shadow: 6px 6px 10px 0px rgba(0,0,0,0.3);
}
@media screen and (max-width:767px) {
  .fuelship h2 {
    margin-bottom: 9vw;
    font-size: 6vw;
  }
  .fuelship .txt_content p {
    font-size: 3.333vw;
    line-height: 2.08;
  }
  .fuelship .txt_content p:nth-child(4) {
    margin-top: 7vw;
  }
  .fuelship .txt_content {
    padding: 0 5.33vw;
  }
  .fuelship_bg {
    padding: 127px 0 73px;
  }
  .fuelship_bg img {
    width: 100%;
  }
  .img_block {
    padding: 0 31.067vw;
  }
  .img_block li {
    width: 100%;
    margin-bottom: 5.333vw;
  }
}

/* ====== structure ======= */
.structure {
  position: relative;
  padding: 0 0 90px;
  color: #215BBA;
}
.structure_bg {
  top: initial !important;
  left: initial !important;
  z-index: 0;
  width: 100%;
  height: 772px;
  padding: 100px 0 0;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  max-width: 100%;
}
.structure_bg img {
  max-width: 100%;
}
.structure h2 {
  position: relative;
  z-index: 1;
  font-size: 40px;
  text-align: center;
}
/* <!-- vid_txt_block --> */
.vid_txt_block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 2;
  width: 1000px;
  margin: 0 auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  max-width: 100%;
}
.vid_txt_block .txt_content {
  width: 42%;
  font-size: 18px;
  font-weight: 700;
}
.vid_txt_block .txt_content p {
  padding-right: 20px;
}
.txt_content .txt_label {
  padding: 4px 0;
  background: url(/jpn/hydrogenfuelcellship/structure/images/bg_thumb.png) no-repeat center;
  color: #fff;
  background-size: 100%;
}
.vid_txt_block .vid_content {
  width: 56%;
}
.vid_content .video_block .youtube_thum {
  width: 100%;
}
/* <!-- txt_block --> */
.txt_block {
  width: 1000px;
  margin: 200px auto 0;
  padding: 60px 60px 30px 50px;
  background-color: rgba(255, 255, 255, 0.75);
  max-width: 100%;
  border-radius: 10px;
}
.txt_content img {
  width: 100%;
}
.txt_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.txt_content01 {
  width: 20%;
}
.txt_content02 {
  width: 80%;
  font-weight: 600;
  line-height: 2;
}
.txt_content02 h3{
  position: relative;
}
.txt_content02 h3 img {
  width: 354px;
}
.txt_content02 h3::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 101px;
  height: 101px;
  background: url(/jpn/hydrogenfuelcellship/structure/images/ico_hydro.png) no-repeat;
  content: '';
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          -ms-interpolation-mode: nearest-neighbor;
}
@media screen and (max-width:767px) {
  .structure {
    padding: 0 0 150px;
  }
  .structure h2 {
    margin-bottom: 12.533vw;
    font-size: 6vw;
  }
  .wrap_sp_only {
    padding: 0 8vw;
  }
  .structure_bg img {
    width: 100%;
  }
  .vid_txt_block .txt_content,
  .vid_txt_block .vid_content {
    width: 100%;
  }
  .vid_txt_block .txt_content .txt_label {
    padding: 1.867vw 0 4.533vw;
    background: url(/jpn/hydrogenfuelcellship/structure/images/bg_thumb_sp.png) no-repeat center;
    font-size: 3.200vw;
    background-size: 40vw;
  }
  .vid_txt_block .txt_content p {
    padding-right: 0;
    font-size: 3.333vw;
    line-height: 2.08;
  }
  .txt_block .txt p {
    font-size: 3.333vw;
    line-height: 2.08;
  }
  .txt_block {
    margin: 10.667vw 0 0;
    padding: 6.667vw 5.667vw;
  }
  .txt_content01,
  .txt_content02 {
    width: 100%;
  }
  .txt_content02 h3::after {
    top: 0;
    right: 0;
    width: 13.333vw;
    height: 13.333vw;
    background-size: 100%;
  }
  .txt_content02 p {
    font-size: 3.333vw;
  }
  .txt_content02 h3 img {
    width: 455px;
    max-width: 100%;
  }
}
.position_fixed {
  position: fixed;
}
.img_center {
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.fade-innn {
  opacity: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1000px) {
  .fuelship_bg {
    padding: 95px 0 50px;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 2500px) {
  .fuelship_bg {
    padding: 108px 0 50px !important;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3),
            only screen and (min--moz-device-pixel-ratio: 3),
            only screen and (-o-min-device-pixel-ratio: 3/1),
            only screen and (min-device-pixel-ratio: 3){
      #section01::before {
        background: url(/jpn/hydrogenfuelcellship/structure/images/bg_bubbles_sp.jpg) no-repeat;
        background-size: cover;
        position: fixed;
        width: 100vw;
        height: 100vh;
      }
    }

@media print, screen and (min-width: 768px) {
  .youtube_thum:not(.btn_type01) a {
      padding-top: 56.12%;
  }
}