@charset "UTF-8";

body {
  min-width: 100%;
}
.wrap {
  min-width: 100%;
}

/*  COMMON
**************************************************************/
#hy_header {
  -webkit-box-shadow: none;
          box-shadow: none;
}

#hy_header.fixed_01 {
  display: block;
  position: fixed;
  background: transparent !important;
}
#hy_header.fixed_02 {
  display: none;
  position: relative;
  background: transparent !important;
}
#hy_header.fixed_03 {
  display: block;
  position: fixed;
  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%);
  -webkit-box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 10%);
          box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 10%);
}
#hy_header.fixed {
  position: fixed;
}
#hy_header {
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
#hy_header .hy_header_nav_wrap.style_01 {
  background-image: none;
}
#hy_header .hy_header_nav_wrap.style_02 {
  background-image: transparent;
}
.sec_inner {
  margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
  .sec_inner {
    max-width: 1400px;
    padding: 0 20px;
  }
  #hy_header_hamburger {
    display: none !important;
  }
  #hy_header.fixed_03 .hy_header_nav_wrap.style_02 {
    background-image: -o-linear-gradient(left, rgb(33, 91, 186), rgb(0, 64, 152)) !important;
    background-image: -webkit-gradient(linear, left top, right top, from(rgb(33, 91, 186)), to(rgb(0, 64, 152))) !important;
    background-image: linear-gradient(to right, rgb(33, 91, 186), rgb(0, 64, 152)) !important;
  }
  #hy_header .hy_header_nav_wrap.style_03 {
    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 screen and (max-width:767px) {
  #hy_header_hamburger.show_01,
  #hy_header_hamburger.show_02 {
    background: transparent !important;
  }
  #hy_header_hamburger.show_01.active {
    background: #215BBA !important;
  }
  #hy_header.fixed_03 {
    height: 62px;
    background: #fff !important;
    -webkit-box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 10%);
            box-shadow: 0px 5px 20px 0px rgb(0 0 0 / 10%);
  }
  #hy_header_hamburger.fixed_03 {
    background: #215BBA !important;
  }
  #hy_header_hamburger {
    top: 0;
    right: 0;
  }
  #hy_header_hamburger.fixed_01 {
    display: block;
  }
  #hy_header_hamburger.show_01 {
    display: block;
  }
  #hy_header_hamburger.show_02 {
    display: none;
  }
  #hy_header_hamburger a {
    padding: 21px 9px 20px;
  }
  .hy_header_logo a {
    display: block;
  }
  .hy_header_logo a img {
    width: 100%;
  }
}
#hydrogenfuelcellship {
  position: relative;
  z-index: 1;
}
.sec_inner,
.sec_inner_02,
.sec_inner_03 {
  margin: 0 auto;
}
section .heading_title,
section .heading_title02 {
  color: #215bba;
  font-weight: 500;
}
section .heading_title {
  line-height: 1.5;
}
section .heading_title02 {
  line-height: 1;
}
.sub_title {
  color: #666;
  font-weight: 600;
  font-family: 'Akshar', sans-serif;
  line-height: 1.8;
}
h2 + .sub_title {
  display: block;
}
.pos_rel {
  position: relative;
}
.algn_center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sec_inner02 {
  max-width: 1920px;
  margin: 0 auto;
}
.txt_img_ver_2_1_1 .col_inner,
.txt_img_ver_2_1_2 .col_inner,
.txt_img_ver_2_1_3 .col_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media print, screen and (min-width: 768px) {
  .sec_inner {
    max-width: 1400px;
  }
  .sec_inner_02 {
    max-width: 1920px;
  }
  .sec_inner_03 {
    max-width: 1400px;
    padding: 0 50px;
  }
  .sub_title {
    font-size: 24px;
  }
  .txt_img_ver_2_1_1 .col_inner,
  .txt_img_ver_2_1_2 .col_inner,
  .txt_img_ver_2_1_3 .col_inner {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  section .heading_title {
    font-size: 64px;
  }
  section .heading_title02 {
    font-size: 70px;
  }
  h2 + .sub_title {
    margin-top: 25px;
  }
}

@media screen and (max-width:767px) {
  .sec_inner,
  .sec_inner_03 {
    padding: 0 5.333vw;
  }
  .sub_title {
    font-size: 3.200vw;
  }
  section .heading_title02 {
    font-size: 9.333vw;
    text-align: left;
  }
  h2 + .sub_title {
    margin-top: 3.733vw;
  }
}

/*  MV
**************************************************************/
.mv_bg{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.mv_bg .mv_bg_inner,
.mv_bg .mv_bg_slide,
.mv_bg .mv_bg_slide .swiper-container,
.mv_bg .mv_bg_slide ul,
.mv_bg .mv_bg_slide ul li{
    height: 100%;
}
.mv_bg .mv_bg_slide ul li .mv_img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.mv_bg .mv_ttl_wrap{
  position: relative;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  margin-top: 110px;
  padding: 0 50px;
}
.mv_bg .mv_ttl img {
  width: 100%;
}
.swiper-slide {
  position: relative;
}
.mv_bnr {
  display: flex;
  gap: 24px;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
}
.mv_bnr a {
    display: inline-block;
}
.mv_bnr a img {
  width: 60%;
}
.mv_bnr a:hover {
    opacity: 0.7;
}
.mv_bnr p.txt{
  background-image: linear-gradient(to right, #0a96dd, #004199);
  color: #fff;
  font-size: 22px;
  line-height: 1.5;
  padding: 15px 20px;
}
.ship_name {
  text-align: right;
  top: 100px;
  position: absolute;
}



@media screen and (max-width:767px) {
  .mv_bnr {
    top: 90px;
    right: 3vw;
  }
  .mv_bnr p.txt{
    font-size: 4vw;
  }
  .ship_name {
    top: 185px !important;
    right: 0 !important;
  }
}
/*  ANIMATION
**************************************************************/
.mask-bg {
  display: inline-block;
  position: relative;
  overflow: hidden;
  color: transparent;
  font-weight: bold;
  line-height: 1.3;
  -webkit-transition: color 0ms 450ms;
  -o-transition: color 0ms 450ms;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: -o-linear-gradient(left,#0A97DE, #004098);
  background-image: -webkit-gradient(linear,left top, right top,from(#0A97DE), to(#004098));
  background-image: linear-gradient(to right,#0A97DE, #004098);
  content: '';
  -webkit-transform: translate(0, 100%);
      -ms-transform: translate(0, 100%);
          transform: translate(0, 100%);
}

.mask-bg.is-animated {
  background: -o-linear-gradient(left, rgba(10, 151, 222, 0), rgba(0, 64, 152, 0) 80%);
  background: -webkit-gradient(linear, left top, right top, from(rgba(10, 151, 222, 0)), color-stop(80%, rgba(0, 64, 152, 0)));
  background: linear-gradient(90deg, rgba(10, 151, 222, 0), rgba(0, 64, 152, 0) 80%);
  color: #0A97DE;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@-webkit-keyframes mask-text {
  0% {
    background: -webkit-gradient(linear, left top, right top, from(rgba(10, 151, 222, 0)), color-stop(80%, rgba(0, 64, 152, 0)));
    background: linear-gradient(90deg, rgba(10, 151, 222, 0), rgba(0, 64, 152, 0) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  40% {
    background: -webkit-gradient(linear, left top, right top, from(rgba(10, 151, 222, 0)), color-stop(80%, rgba(0, 64, 152, 0)));
    background: linear-gradient(90deg, rgba(10, 151, 222, 0), rgba(0, 64, 152, 0) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  60% {
    background: -webkit-gradient(linear, left top, right top, from(rgba(10, 151, 222, 1)), color-stop(80%, rgba(0, 64, 152, 1)));
    background: linear-gradient(90deg, rgba(10, 151, 222, 1), rgba(0, 64, 152, 1) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  100% {
    background: -webkit-gradient(linear, left top, right top, from(rgba(10, 151, 222, 1)), color-stop(80%, rgba(0, 64, 152, 1)));
    background: linear-gradient(90deg, rgba(10, 151, 222, 1), rgba(0, 64, 152, 1) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@keyframes mask-text {
  0% {
    background: -o-linear-gradient(left, rgba(10, 151, 222, 0), rgba(0, 64, 152, 0) 80%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(10, 151, 222, 0)), color-stop(80%, rgba(0, 64, 152, 0)));
    background: linear-gradient(90deg, rgba(10, 151, 222, 0), rgba(0, 64, 152, 0) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  40% {
    background: -o-linear-gradient(left, rgba(10, 151, 222, 0), rgba(0, 64, 152, 0) 80%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(10, 151, 222, 0)), color-stop(80%, rgba(0, 64, 152, 0)));
    background: linear-gradient(90deg, rgba(10, 151, 222, 0), rgba(0, 64, 152, 0) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  60% {
    background: -o-linear-gradient(left, rgba(10, 151, 222, 1), rgba(0, 64, 152, 1) 80%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(10, 151, 222, 1)), color-stop(80%, rgba(0, 64, 152, 1)));
    background: linear-gradient(90deg, rgba(10, 151, 222, 1), rgba(0, 64, 152, 1) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  100% {
    background: -o-linear-gradient(left, rgba(10, 151, 222, 1), rgba(0, 64, 152, 1) 80%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(10, 151, 222, 1)), color-stop(80%, rgba(0, 64, 152, 1)));
    background: linear-gradient(90deg, rgba(10, 151, 222, 1), rgba(0, 64, 152, 1) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@-webkit-keyframes mask-bg {
  0% {
    -webkit-transform: translate(0, 101%);
            transform: translate(0, 101%);
  }
  40%, 60% {
    -webkit-transform: translate(0, 0%);
            transform: translate(0, 0%);
  }
  100% {
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%);
  }
}

@keyframes mask-bg {
  0% {
    -webkit-transform: translate(0, 101%);
            transform: translate(0, 101%);
  }
  40%, 60% {
    -webkit-transform: translate(0, 0%);
            transform: translate(0, 0%);
  }
  100% {
    -webkit-transform: translate(0, -100%);
            transform: translate(0, -100%);
  }
}

@media print, screen and (min-width: 768px) {
  .mv_bg .mv_ttl {
  max-width: 70%;
  }
  .mv_bg .mv_ttl_wrap{
    margin-top: 110px;
  }
  .mv_bg .mv_bg_slide ul li:nth-of-type(1) .mv_img{
    background-image: url("/jpn/hydrogenfuelcellship/images/mv_bg1.jpg");
  }
  .mask-bg {
    font-size: 50px;
  }
  .mv_ttl.pc_only .mask-bg.is-animated {
    -webkit-animation: mask-text 0.8s cubic-bezier(0.8, 0, 0.170, 1);
            animation: mask-text 0.8s cubic-bezier(0.8, 0, 0.170, 1);
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
  }
  .mv_ttl.pc_only .mask-bg.is-animated::after {
    -webkit-animation: mask-bg 0.8s cubic-bezier(0.8, 0, 0.170, 1);
            animation: mask-bg 0.8s cubic-bezier(0.8, 0, 0.170, 1);
  }
}

@media only screen and (device-width: 1280px) and (device-height: 800px) and (orientation:landscape) {
  .mv_bg .mv_ttl {
    max-width: 50% !important;
  }
  .mv_txt.mask-bg {
    font-size: 32px !important;
  }
}

@media screen and (max-width:767px) {
  .mv_bg .mv_bg_slide ul li:nth-of-type(1) .mv_img {
    background-image: url("/jpn/hydrogenfuelcellship/images/mv_bg_sp.jpg");
  }
  .mv_bg .mv_ttl_wrap {
    padding: 0 10px 0 20px;
  }
  .mv_bg .mv_ttl {
    max-width: 94vw;
    width: 100%;
  }
  .mv_bg .mv_ttl_wrap {
    margin-top: 90px;
  }
  .mv_txt.mask-bg {
    font-size: 5.9vw !important;
  }
  .mv_txt {
    line-height: 1.2;
  }
  .mv_bg .mv_ttl {
    max-width: 100% !important;
  }
  .mv_ttl.sp_only div .mask-bg.is-animated {
    -webkit-animation: mask-text 0.8s cubic-bezier(0.8, 0, 0.170, 1);
            animation: mask-text 0.8s cubic-bezier(0.8, 0, 0.170, 1);
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
  }
  .mv_ttl.sp_only div .mask-bg.is-animated::after {
    -webkit-animation: mask-bg 0.8s cubic-bezier(0.8, 0, 0.170, 1);
            animation: mask-bg 0.8s cubic-bezier(0.8, 0, 0.170, 1);
  }
}
@media only screen and (min-width: 200px) and (max-width: 350px) and (max-height: 820px) {
  .mv_txt.mask-bg {
    font-size: 5vw !important;
  }
  .feature_area h2 {
    font-size: 7.533vw;
  }
}

@media only screen and (min-width: 150px) and (max-width: 199px) and (max-height: 540px) {
  .img_link img {
    max-width: 49px !important;
  }
  .mv_bg .mv_ttl_wrap {
    margin-top: 60px !important;
  }
  .mv_bg .mv_ttl_wrap {
    padding: 0 15px !important;
  }
}

@media only screen and (min-width: 200px) and (max-width: 767px) and (max-height: 820px) {
  .link_container {
    top: 160px !important;
  }
  .img_link img {
    max-width: 70px !important;
  }
}

@media only screen and (min-width: 200px) and (max-width: 279px) and (max-height: 540px) {
  .img_link img {
    max-width: 50px !important;
  }
  .img_link {
    bottom: 140px !important;
  }
  .mv_bg .mv_ttl_wrap {
    margin-top: 70px !important;
  }
  .mv_txt.mask-bg {
    font-size: 12px !important;
  }
}

@media only screen and (min-width: 280px) and (max-width: 767px) and (max-height: 600px) {
  .mv_bg .mv_bg_slide ul li:nth-of-type(1) .mv_img {
    background: url("/jpn/hydrogenfuelcellship/images/mv_bg_ipad.jpg") center no-repeat !important;
    background-size: cover !important;
  }
  #heading01.not-fixed {
    width: 35vw !important;
  }
  #heading01 {
    width: 35vw !important;
  }
  .mv_bg .mv_ttl_wrap {
    margin-top: 60px !important;
  }
  .img_link {
    bottom: 120px !important;
  }
  .anchor_fixed_sp .anchor_fixed_btn.fixed {
    width: 60% !important;
  }
  .mv_txt.mask-bg {
    font-size: 20px !important;
  }
  .link_container {
    bottom: 10% !important;
  }
  .mv_bg .mv_ttl_wrap {
    padding: 0 15px !important;
  }
  .img_link img {
    max-width: 60px !important;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) and (max-height: 1024px) {
  .mv_bg .mv_bg_slide ul li:nth-of-type(1) .mv_img {
    background: url("/jpn/hydrogenfuelcellship/images/mv_bg_ipad.jpg") center no-repeat !important;
    background-size: cover !important;
  }
}

@media only screen and (min-width: 280px) and (max-width: 767px) and (max-height: 540px) {
  .link_container {
    bottom: 5% !important;
  }
  .mv_txt.mask-bg {
    font-size: 18px !important;
  }
  .mv_txt.mask-bg {
    font-size: 5vw !important;
  }
  .mv_ttl.sp_only .col_txt > .mv_txt {
    display: block !important;
  }
  .mv_ttl.sp_only .col_img p {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: end !important;
        -ms-flex-pack: end !important;
            justify-content: flex-end !important;
  }
  .mv_ttl.sp_only .col_img img {
    width: 50% !important;
  }
}
@media only screen and (min-width: 600px) and (max-width: 767px) and (max-height: 540px) {
  .mv_ttl.sp_only .col_img img {
    width: 70% !important;
  }
}


@media only screen and (min-width: 768px) and (max-width: 784px) and (max-height: 1024px) {
  .section01_area h1.not-fixed {
    top: unset !important;
    bottom: 40px !important;
  }
  .sec_header {
    height: auto !important;
  }
  .mv_txt.mask-bg {
    font-size: 30px !important;
  }
}

@media only screen and (min-width: 600px) and (max-width: 820px) and (max-height: 1400px) {
  .mv_txt.mask-bg {
    font-size: 24px !important;
    letter-spacing: -1px !important;
  }
  .mv_txt {
    max-width: 50vw !important;
  }
}

@media only screen and (device-width: 768px) and (device-height: 1024px) and(orientation: portrait) {
  .mv_bg .mv_ttl {
    max-width: 70%;
  }
}

@media only screen and (min-width: 821px) and (max-width: 1024px) and (max-height: 1200px) {
  .mv_bg .mv_ttl {
    max-width: 50% !important;
  }
}

@media only screen and (min-width: 820px) and (max-width: 1280px) and (max-height: 1400px) {
  .mv_txt.mask-bg {
    font-size: 35px !important;
  }
}

@media only screen and (min-width: 820px) and (max-width: 1023px) and (max-height: 1200px) {
  .mv_bg .mv_ttl {
    max-width: 60% !important;
  }
  .mv_txt.mask-bg {
    font-size: 26px !important;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) and (max-height: 1024px) {
  .section01_area h1.not-fixed {
    top: unset !important;
    bottom: 40px !important;
  }
  .sec_header {
    height: auto !important;
  }
  .mv_txt.mask-bg {
    font-size: 28px !important;
  }
}

@media only screen and (min-width: 820px) and (max-width: 784px) and (max-height: 512px) {
  .section01_area h1.not-fixed {
    top: unset !important;
    bottom: 40px !important;
  }
  .sec_header {
    height: auto !important;
  }
  .mv_txt.mask-bg {
    font-size: 22px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1280px) and (max-height: 540px) {
  .mv_bg .mv_bg_slide ul li:nth-of-type(1) .mv_img {
    background: url("/jpn/hydrogenfuelcellship/images/mv_bg_ipad.jpg") center no-repeat !important;
    background-size: cover !important;
  }
  #hy_header .hy_header_wrap {
    padding: 0 20px !important;
  }
  .mv_bg .mv_ttl_wrap {
    padding: 0 20px !important;
  }
  .img_link img {
    width: 60% !important;
  }
  .scroll_inner {
    left: -20px !important;
  }
  .mv_txt.mask-bg {
    font-size: 26px !important;
  }
  .mv_bg .mv_ttl_wrap {
    margin-top: 90px !important;
  }
  .mv_bg .mv_ttl {
    max-width: 60% !important;
  }
}

@media only screen and (min-width: 1098px) and (max-width: 1279px) {
  .mv_bg .mv_ttl {
    max-width: 50% !important;
  }
}
@media only screen and (device-width: 1180px) and (device-height: 820px) and (orientation:landscape) {
  .mv_bg .mv_ttl {
    max-width: 60% !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1280px) and (max-height: 1400px){
  .mv_txt.mask-bg {
    font-size: 30px !important;
  }
}
@media only screen and (min-width: 1281px) and (max-width: 1300px) and (max-height: 1400px){
  .mv_txt.mask-bg {
    font-size: 36px !important;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1400px) and (max-height: 1400px){
  .mv_txt.mask-bg {
    font-size: 42px !important;
  }
}

@media only screen and (device-width: 1280px) and (device-height: 1024px) and (orientation:landscape) {
  .mv_bg .mv_ttl {
    max-width: 50% !important;
  }
  .mv_txt.mask-bg {
    font-size: 32px !important;
  }
}

.link_inner,
.scroll_container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}
.link_container {
  z-index: 2;
  width: 100%;
}
.img_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  outline: none;
}
@-webkit-keyframes lineAnime {
  0% {
    top: -3px;
    opacity: 0;
  }
  15% {
    top: 15%;
    opacity: 1;
  }
  85%{
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@keyframes lineAnime {
  0% {
    top: -3px;
    opacity: 0;
  }
  15% {
    top: 15%;
    opacity: 1;
  }
  85%{
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
#scrollGuide {
  position: absolute;
  z-index: 20;
  width: 2px;
  height: 70px;
  overflow: visible;
  margin: auto;
  background: #fff;
}
#scrollGuide span {
  display: block;
  position: absolute;
  top: 0;
  left: -0.3em;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  -webkit-animation: lineAnime 2s ease 1s infinite;
  animation: lineAnime 2s ease 1s infinite;
}
.scroll_inner {
  position: absolute;
}

@media print, screen and (min-width: 768px) {
  .link_container {
    position: fixed;
    bottom: 12px;
  }
  .scroll_inner {
    bottom: 100px;
    left: 0;
  }
  .img_link img {
    width: 100%;
    max-width: 140px;
  }
  #scrollGuide {
    left: 50px;
  }
  .img_link {
    right: 30px;
  }
}

/*  SECTION01_AREA
**************************************************************/
.section01_area p {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
}
.section01_area {
  position: relative;
  z-index: 1;
}
.section01_area:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: '';
}
.section01_area h1.not-fixed {
  position: fixed;
}
.video_block .youtube_thum {
  max-width: 1152px;
  width: 100%;
}
.news_inner {
  background-color: #fff;
  opacity: 0.9;
}
.news_list li {
  padding-bottom: 10px;
  border-bottom: 2px solid #000;
}
.news_list li:not(:first-child) {
  margin-top: 20px;
}
.news_list li a {
  color: #000;
  text-decoration: none;
}
.news_list li a._active {
  color: #215BBA;
}
.news_item .date {
  display: block;
  padding: 0 5px;
  border-radius: 5px;
  background: #999;
  color: #fff;
  font-family: 'Akshar', sans-serif;
  text-align: center;
  line-height: 1.3;
}
.news_item .details {
  display: block;
  margin-top: 10px;
  line-height: 1.6;
}
.txt_content .bnr{
  max-width: 360px;
  width: 100%;
  margin: 50px auto 0;
}
.txt_content .bnr a{
  display: block;
}
.txt_content .bnr a img{
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .section01_area h1.not-fixed {
    left: 50%;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .section01_area h1 {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
  }
  .sec01_block01  {
    padding: 158px 0 0;
  }
  .section01_area h1 .sp_txt {
    font-size: 81px;
  }
  #txt_content_container {
    padding-top: 60px;
  }
  .section01_area p:not(:first-child) {
    margin-top: 50px;
  }
  .video_block {
    margin-top: 90px;
  }
  .video_block .youtube_thum img {
    width: 100%;
  }
  .news_block {
    margin-top: 150px;
    padding-bottom: 150px;
  }
  .news_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 310px;
    padding: 60px 50px;
  }
  .news_inner .news_heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 25%;
    padding-left: 77px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .news_inner .news_list {
    width: 75%;
  }
  .news_item .date {
    max-width: 200px;
    font-size: 24px;
  }
  .news_item .details {
    font-size: 20px;
  }
  .btn_block {
    max-width: 970px;
    margin: 115px auto 0;
    padding-bottom: 100px;
  }
  .btn_block a img {
    width: 100%;
  }
  .section01_area:before {
    background: url("/jpn/hydrogenfuelcellship/images/bg_bubbles.jpg") no-repeat center;
    background-size: cover;
    background-attachment: fixed;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .section01_area h1.not-fixed {
    max-width: 60%;
    width: 100%;
  }
  .section01_area h1 {
    max-width: 62.7%;
    width: 100%;
  }
  .sec01_block01 {
    padding: 120px 0 0 !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1300px) {
  .section01_area h1.not-fixed {
    max-width: 60%;
  }
  .section01_area h1 {
    max-width: 62.7%;
  }
  /* .img_link img {
    width: 50%;
  } */
  .mv_bg .mv_bg_slide ul li:nth-of-type(1) .mv_img {
    background-image: url("/jpn/hydrogenfuelcellship/images/mv_bg_ipad.jpg");
  }
  #hy_footer .hy_footer_link_list a {
    font-size: 12px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
  .btn_block a img {
    width: 100%;
  }
  .video_block .youtube_thum img {
    width: 100%;
  }
  .section01_area h1 .sp_txt {
    font-size: 60px;
  }
  .section01_area h1 .txt_small {
    font-size: 43px;
  }
  .sec01_block01 {
    padding: 100px 0 0;
  }
  .section01_area p:first-child {
    margin-top: 40px;
  }
  .section01_area p:not(:first-child) {
      margin-top: 30px;
  }
  .section01_area p {
    font-size: 16px;
  }
  .video_block {
    max-width: 80%;
    margin: 60px auto 0;
  }
  .news_block {
    max-width: 90%;
    margin: 100px auto 0;
  }
  .news_inner .news_heading {
    padding-left: 0;
  }
  .news_inner {
    min-height: 350px;
    padding: 30px;
  }
  .btn_block {
    margin-top: 80px;
    padding-bottom: 50px;
  }
  .news_item .details {
    font-size: 14px;
  }
  .news_inner .news_heading h3 img{
    width: 100%;
  }
  .news_inner .news_list {
    padding-left: 25px;
  }
  .news_item .date {
    max-width: 120px;
    font-size: 16px;
  }
  .btn_block a img {
    width: 70%;
  }
  section .heading_title {
    font-size: 44px;
  }
}

@media screen and (max-width:767px) {
  .mainvisual_area .mv_txt {
    max-width: 71.47vw;
  }
  .section01_area {
    position: relative;
  }
  .section01_area h1 {
    width: 70vw;
    margin: 0 auto;
  }
  .section01_area h1.not-fixed {
    left: 50%;
    width: 70vw;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .txt_content p {
    font-size: 3.20vw;
  }
  #txt_content_container {
    margin-top: 6.67vw;
  }
  .section01_area p:not(:first-child) {
    margin-top: 6.67vw;
  }
  .section01_area .sec_inner {
    padding: 0;
  }
  .sec01_block01 {
    padding: 22.67vw 5.33vw 16vw;
  }
  .scroll_inner {
    position: absolute;
    bottom: 80px;
    left: 50%;
    z-index: 1;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .anchor_fixed_sp .anchor_fixed_btn {
    display: none;
  }
  .anchor_fixed_sp .anchor_fixed_btn.fixed {
    display: block;
    position: fixed;
    left: 50%;
    z-index: 9;
    width: 80%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .anchor_fixed_sp .anchor_fixed_btn.fixed img {
    width: 100%;
  }
  .news_block {
    margin: 13.33vw 8.67vw 0;
    padding-bottom: 13.33vw;
  }
  .news_inner {
    padding: 8.53vw 5.33vw;
  }
  .news_list {
    margin-top: 5.33vw;
  }
  .news_item .date {
    max-width: 26.667vw;
    font-size: 3.20vw;
  }
  .news_item .details {
    font-size: 2.67vw;
  }
  .news_inner .news_heading h3 img {
    max-width: 43.467vw;
  }
  .btn_block {
    width: 96%;
    margin-top: 12.27vw;
    padding-bottom: 13.33vw;
  }
  .btn_block a {
    display: block;
  }
  .section01_area:before {
    background: url("/jpn/hydrogenfuelcellship/images/bg_bubbles_sp.jpg") no-repeat center;
    background-size: cover;
    background-attachment: scroll;
  }
  .link_container {
    position: absolute;
    top: 190px;
  }
  .img_link img {
    max-width: 85px;
  }
  #scrollGuide {
    height: 60px;
  }
  .img_link {
    right: 0;
  }
  .mv_ttl.sp_only {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .mv_ttl.sp_only .col_txt {
    width: 73%;
  }
  .mv_ttl.sp_only .col_img {
    width: 27%;
  }
}

@media only screen and (min-width: 520px) and (max-width: 767px) {
  .mv_ttl.sp_only .col_txt {
    width: 80%;
  }
  .mv_ttl.sp_only .col_img {
    width: 20%;
  }
}

/*  FEATURE_AREA
**************************************************************/
.img_txt_ver_3_1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.img_txt_ver_3_1 .img_thumb img {
  width: 100%;
}
.img_txt_ver_3_1 .txt_content {
  position: relative;
  background-color: #fff;
}
.img_txt_ver_3_1 .txt_content p {
  color: #215bba;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.1px;
}
.img_txt_ver_3_1 .txt_content::before {
  position: absolute;
  top: 0;
  left: 15px;
  font-weight: 500;
  font-family: 'Akshar', sans-serif;
  content: counter(list-item);
}
.img_txt_ver_3_1 li a {
  display: block;
  color: #000;
  text-decoration: none;
}
.img_txt_ver_3_1 li a:hover {
  text-decoration: none;
}
.feature_area .img_txt_ver_3_1 .col_inner:nth-child(2) .txt_content {
  position: relative;
}
.txt_note {
  position: absolute;
  top: 5px;
  right: 0;
  padding: 0 5px;
  color: #000;
  font-weight: 600;
}

@media print, screen and (min-width: 768px) {
  .feature_area {
    background-color: #ebebeb;
  }
  .feature_area .sec_inner {
    padding: 295px 0 170px;
    background: url("/jpn/hydrogenfuelcellship/images/bg_features.png") no-repeat top 192px center;
    background-size: contain;
  }
  .feature_area .img_logo {
    max-width: 269px;
  }
  .feature_area h2 {
    margin-top: 20px;
  }
  .feature_area .sub_title {
    margin-left: 20px;
  }
  .img_txt_ver_3_1 {
    margin-top: 60px;
  }
  .img_txt_ver_3_1 .col_inner {
    width: calc((100% - 160px) / 3);
  }
  .img_txt_ver_3_1 .col_inner:not(:nth-child(3n)) {
    margin-right: 80px;
  }
  .img_txt_ver_3_1 .txt_content {
    padding: 50px 20px 40px 60px;
  }
  .img_txt_ver_3_1 .txt_content::before {
    top: 30px;
    font-size: 60px;
    line-height: 1;
  }
  .img_txt_ver_3_1 .txt_content p {
    font-size: 20px;
  }
  .txt_note {
    font-size: 8px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
  .feature_area {
    background-color: #ebebeb;
  }
  .feature_area .sec_inner {
    padding: 150px 20px 50px;
    background: url("/jpn/hydrogenfuelcellship/images/bg_features.png") no-repeat top 40px center;
    background-size: contain;
  }
  .img_txt_ver_3_1 .col_inner {
    width: calc((100% - 40px) / 3);
  }
  .img_txt_ver_3_1 .col_inner:not(:nth-child(3n)) {
    margin-right: 20px;
  }
  .txt_note {
    font-size: 7px;
  }
  .img_txt_ver_3_1 .txt_content {
    padding: 60px 15px 40px 50px;
  }
  .img_txt_ver_3_1 .txt_content::before {
    top: 45px;
    font-size: 40px;
  }
  .feature_area .img_logo {
    max-width: 200px;
  }
  .sub_title {
    font-size: 20px;
  }
  .img_txt_ver_3_1 .txt_content p {
    font-size: 16px;
    letter-spacing: -0.1px;
  }
}

@media screen and (max-width:767px) {
  .feature_area {
    padding: 15.20vw 0 13.33vw;
    background: url("/jpn/hydrogenfuelcellship/images/bg_features_sp.png") no-repeat top 11.200vw center #ebebeb;
    background-size: contain;
  }
  .feature_area .img_logo {
    max-width: 29.333vw;
  }
  .feature_area h2 {
    margin-top: 2.667vw;
    font-size: 8.533vw;
    line-height: 1;
  }
  .img_txt_ver_3_1 {
    margin-top: 9.067vw;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .img_txt_ver_3_1 .col_inner {
    width: 100%;
  }
  .img_txt_ver_3_1 .col_inner:not(:first-child) {
    margin-top: 7.467vw;
  }
  .img_txt_ver_3_1 .txt_content::before {
    font-size: 12vw;
  }
  .img_txt_ver_3_1 .txt_content {
    padding: 8vw 8vw 8vw 16vw;
  }
  .img_txt_ver_3_1 .txt_content p {
    font-size: 4.267vw;
    line-height: 1.4;
  }
  .txt_note {
    font-size: 1.933vw;
  }
}

/*  ROUTE_AREA
**************************************************************/
.col_inner .img_thumb img {
  width: 100%;
}
.col_inner .txt_description {
  color: #333;
  line-height: 2;
}
.col_inner .txt_description.gradient{
  background-image: linear-gradient(to right, #0a96dd, #004199);
  color: #fff;
  padding: 20px 25px;
}
.col_inner .link_btn {
  display: block;
  position: relative;
  border-radius: 50px;
  background-image: -o-linear-gradient(left,#0A97DE, #004098);
  background-image: -webkit-gradient(linear,left top, right top,from(#0A97DE), to(#004098));
  background-image: linear-gradient(to right,#0A97DE, #004098);
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  letter-spacing: -1.5px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.col_inner .link_btn:hover {
  -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
          transform: translateY(3px);
}
.col_inner .link_btn:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/jpn/hydrogenfuelcellship/images/icon_arrow_white.png") no-repeat left 20px center;
  content: '';
}
.col_inner .img_thumb a {
  display: block;
}

@media print, screen and (min-width: 768px) {
  .route_area {
    padding: 100px 0 105px;
  }
  .txt_img_ver_2_1_1 .col_inner .txt_content {
    width: 27%;
    margin-right: 3%;
    padding: 0 0 80px 0;
  }
  .txt_img_ver_2_1_1 .col_inner .img_thumb {
    width: 70%;
  }
  .col_inner .txt_description {
    margin-top: 40px;
    font-size: 22px;
    letter-spacing: -0.5px;
  }
  .col_inner .link_btn {
    max-width: 280px;
    margin-top: 40px;
    padding: 14px 20px 16px 60px;
    font-size: 28px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
  .route_area {
    padding: 80px 0 50px;
  }
  .txt_img_ver_2_1_1 .col_inner .txt_content {
    width: 37%;
    margin-right: 3%;
    padding: 0 0 40px 20px;
  }
  .txt_img_ver_2_1_1 .col_inner .img_thumb {
    width: 60%;
  }
  .col_inner .txt_description {
    margin-top: 20px;
    font-size: 14px;
    letter-spacing: -0.2px;
  }
  .col_inner .link_btn {
    max-width: 190px;
    margin-top: 25px;
    font-size: 15px;
  }
  section .heading_title02 {
    font-size: 45px;
  }
  h2 + .sub_title {
    margin-top: 15px;
  }
  .col_inner .link_btn:before {
    background-size: 17%;
  }
}

@media screen and (max-width:767px) {
  .route_area {
    padding: 0 0 10vw;
  }
  .txt_img_ver_2_1_1 .col_inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .route_area .txt_img_ver_2_1_1 .col_inner .txt_content {
    width: 90%;
    margin-top: -19.333vw;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .txt_img_ver_2_1_1 .col_inner .txt_content {
    position: relative;
    z-index: 1;
    padding: 4.667vw 5.333vw;
    background: #fff;
  }
  .col_inner .txt_description {
    margin-top: 5.333vw;
    font-size: 3.333vw;
  }
  .col_inner .link_btn {
    min-width: 37.333vw;
    margin-top: 2.667vw;
    padding: 3.467vw 4vw 3.467vw 9.600vw;
    font-size: 3.733vw;
  }
  .col_inner .link_btn:before {
    position: absolute;
    top: 50%;
    left: 2.667vw;
    width: 5.333vw;
    height: 5.467vw;
    background: url("/jpn/hydrogenfuelcellship/images/icon_arrow_white.png") no-repeat left center;
    content: '';
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    background-size: 100%;
  }
  .txt_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            /* justify-content: flex-end; */
  }
  .col_inner .txt_description.gradient{
    font-size: 2.8vw;
  }
}

/*  DESIGN_AREA
**************************************************************/
.design_area .txt_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

.design_area .img_container {
  position: relative;
}
.design_area .img_container {
    position: relative;
  }
  .design_area .img_container .img01,
  .design_area .img_container .img02,
  .design_area .img_container .img03,
  .design_area .img_container .img04 {
    position: absolute;
  }

.design_area .img_container .img01 {
  display: block;
  left: 43.15%;
  width: 49.07%;
  background-image: -o-linear-gradient(left,#0A97DE, #004098);
  background-image: -webkit-gradient(linear,left top, right top,from(#0A97DE), to(#004098));
  background-image: linear-gradient(to right,#0A97DE, #004098);
}
.design_area .img_container .img02 {
  left: 49.24%;
  max-width: 50.76%;
}
.design_area .img_container .img03 {
  left: 0;
  max-width: 61.93%;
}
.design_area .img_container .img04 {
  left: 4.44%;
  max-width: 33.63%;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .design_area {
    padding: 0 0 40px !important;
  }
  .txt_img_ver_2_1_2 .col_inner .txt_content {
    padding: 40px 0 0 !important;
  }
}
@media only screen and (min-width: 1280px) and (max-width: 1400px) {
  .design_area {
    padding: 0 0 100px !important;
  }
}
@media print, screen and (min-width: 768px) {
  .design_area {
    padding: 0 0 80px;
    background: url("/jpn/hydrogenfuelcellship/images/bg_bubbles_gray.jpg") no-repeat center;
    background-size: cover;
  }
  .txt_img_ver_2_1_2 .col_inner .img_thumb {
    width: 55%;
  }
  .txt_img_ver_2_1_2 .col_inner .txt_content {
    width: 40%;
    margin-left: 5%;
    padding: 80px 0 0 0;
  }
  #design .col_inner .link_btn {
    min-width: 280px;
  }
  .design_area .img_container .img01 {
    top: 10.78%;
    padding-bottom: 40.86%;
  }
  .design_area .img_container .img02 {
    top: 17.65%;
  }
  .design_area .img_container .img03 {
    top: -9.80%;
  }
  .design_area .img_container .img04 {
    top: 50.08%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .txt_img_ver_2_1_2 .col_inner .img_thumb {
    width: 52%;
  }
  .txt_img_ver_2_1_2 .col_inner .txt_content {
    width: 45%;
    margin-left: 3%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 850px) {
  .design_area .img_container .img04 {
    top: 32.08%;
  }
}
@media only screen and (min-width: 851px) and (max-width: 920px) {
  .design_area .img_container .img04 {
    top: 36.08%;
  }
}
@media only screen and (min-width: 921px) and (max-width: 1024px) {
  .design_area .img_container .img04 {
    top: 41.08%;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  .design_area .img_container .img04 {
    top: 53.08%;
  }
}
@media only screen and (min-width: 1201px) and (max-width: 1399px) {
  .design_area .img_container .img04 {
    top: 62.08%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1400px) {
  #design .col_inner .link_btn {
    min-width: 180px;
    max-width: 180px;
    font-size: 15px;
  }
}

@media screen and (max-width:767px) {
  .design_area {
    padding: 0 0 9.867vw;
    background: url("/jpn/hydrogenfuelcellship/images/bg_bubbles_gray_sp.png") no-repeat center;
    background-size: cover;
  }
  .txt_img_ver_2_1_2 .col_inner .img_thumb img {
    margin-top: -4vw;
  }
  .txt_img_ver_2_1_2 .col_inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .txt_img_ver_2_1_2 .col_inner > * {
    width: 100%;
  }
  .txt_img_ver_2_1_2 .col_inner .txt_content {
    width: 90%;
    margin-top: 6vw;
    padding: 4.667vw 5.333vw;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .design_area .img_container .img01 {
    top: 8vw;
    padding-bottom: 32vw;
  }
  .design_area .img_container .img02 {
    top: 18vw;
  }
  .design_area .img_container .img03 {
    top: -4vw;
  }
  .design_area .img_container .img04 {
    top: 28vw;
  }
}

/*  STRUCTURE_AREA
**************************************************************/
.structure_area {
  position: relative;
  background: #fff;
}
.structure_area h2 .sub_heading{
  display: block;
}
.structure_area .img_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: url("/jpn/hydrogenfuelcellship/images/structure_thumb.png") no-repeat center;
  background-size: cover;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media print, screen and (min-width: 768px) {
  .structure_area {
    padding: 120px 0;
  }
  .structure_area h2 .sub_heading{
    font-size: 40px;
  }
  .structure_area .img_container {
    padding: 100px 0;
  }
  .structure_area .structure_text {
    position: relative;
    right: 0;
    width: 60% !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .structure_area .img_container {
    padding: 58px 0;
    background-size: contain;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
  .structure_area h2 .sub_heading {
    font-size: 25px;
  }
  section .heading_title {
    font-size: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
  .structure_area {
    padding: 80px 0 40px;
  }
}

@media screen and (max-width:767px) {
  .structure_area {
    padding: 12vw 0;
  }
  .structure_area .sec_inner {
    padding: 0;
  }
  .structure_area .txt_img_ver_2_1_1 .col_inner .txt_content {
    padding: 5.333vw;
    background: #fff;
  }
  .structure_area .heading_title {
    font-size: 9.333vw;
    text-align: left;
  }
  .structure_area .sub_title {
    font-size: 4vw;
  }
  .structure_area .img_container {
    padding: 5vw 0;
    background-size: 100%;
  }
  .structure_area h2 + .sub_title {
    margin-top: 0;
  }
  .structure_area .sp_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .structure_area .sp_flex .txt_description {
    width: 50%;
    letter-spacing: -0.1px;
  }
  .structure_area .sp_flex .txt_link {
    width: 45%;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .structure_area h2 .sub_heading{
    font-size: 5.333vw;
  }
  .structure_area .col_inner .img_thumb img {
      width: 80%;
  }
}

/*  ONBOARD_AREA
**************************************************************/
.bg_onboard_area .sec_inner_02 {
  position: relative;
  max-width: 1400px;
}
.txt_img_ver_2_1_3 .img_thumb a {
  display: block;
}

@media print, screen and (min-width: 768px) {
  .txt_img_ver_2_1_3 .img_thumb {
    padding-right: 25px;
  }
  .bg_onboard_area .sec_inner_02 {
    padding: 200px 50px;
    background: url("/jpn/hydrogenfuelcellship/images/bg_onboard.png") no-repeat center;
    background-size: cover;
  }
  .bg_onboard_area .sec_inner {
      padding: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
  /* .bg_onboard_area {
    padding-right: 40px;
  } */
  .bg_onboard_area .sec_inner_02 {
    padding: 160px 50px;
  }
  .txt_img_ver_2_1_3 .col_inner > * {
    width: calc((100% - 30px) / 2);
  }
  .txt_img_ver_2_1_3 .col_inner > .txt_content {
    margin-right: 30px;
  }
  .txt_img_ver_2_1_3 .img_thumb {
    padding-right: 0;
  }
}

@media screen and (max-width:767px) {
  .bg_onboard_area .sec_inner_02 {
    padding: 39.667vw 1.333vw 47.733vw;
    background: url("/jpn/hydrogenfuelcellship/images/bg_onboard_sp.jpg") no-repeat center;
    background-size: cover;
  }
  .bg_onboard_area .heading_title {
    font-size: 9.333vw;
  }
  .bg_onboard_area h2 + .sub_title {
      margin-top: 0;
  }
  .txt_img_ver_2_1_3 .img_thumb {
    margin-top: 8vw;
  }
}

/*  BANNER_AREA
**************************************************************/
.banner_area .banner_inner {
  position: relative;
}
.banner_area .banner_inner .txt_link {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.banner_area .banner_inner .txt_link .link_btn {
  position: relative;
  border-radius: 50px;
  background-image: -o-linear-gradient(left,#0A97DE, #004098);
  background-image: -webkit-gradient(linear,left top, right top,from(#0A97DE), to(#004098));
  background-image: linear-gradient(to right,#0A97DE, #004098);
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  letter-spacing: -1.5px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.banner_area .banner_inner .txt_link .link_btn:hover {
  -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
          transform: translateY(3px);
}
.banner_area .banner_inner .txt_link .link_btn:before {
  position: absolute;
  content: '';
}
.banner_area .banner_block img {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .banner_area {
    padding: 100px 0;
  }
  .banner_area .banner_inner .txt_link .link_btn {
    display: block;
    min-width: 510px;
    padding: 14px 20px 16px 60px;
    font-size: 28px;
  }
  .banner_area .banner_inner .txt_link .link_btn:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/jpn/hydrogenfuelcellship/images/icon_arrow_white.png") no-repeat left 125px center;
  }
  .banner_area .banner_inner .txt_link {
    bottom: 4%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .banner_area .banner_inner .txt_link .link_btn {
    min-width: 225px;
    padding: 12px 20px 12px 50px;
  }
  .banner_area .banner_inner .txt_link .link_btn:before {
    background: url("/jpn/hydrogenfuelcellship/images/icon_arrow_white.png") no-repeat left 20px center;
    background-size: 15%;
  }
  .banner_area .banner_inner .txt_link {
    bottom: 4px;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  .banner_area .banner_inner .txt_link .link_btn {
    min-width: 225px;
  }
  .banner_area .banner_inner .txt_link {
    bottom: 15px;
  }
  .banner_area .banner_inner .txt_link .link_btn:before {
    background: url("/jpn/hydrogenfuelcellship/images/icon_arrow_white.png") no-repeat left 20px center;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1400px) {
  .banner_area .banner_inner .txt_link .link_btn {
    min-width: 225px;
  }
  .banner_area .banner_inner .txt_link {
    bottom: 6%;
  }
  .banner_area .banner_inner .txt_link .link_btn:before {
    background: url("/jpn/hydrogenfuelcellship/images/icon_arrow_white.png") no-repeat left 20px center;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
  .banner_area .banner_inner .txt_link .link_btn {
    min-width: 225px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
  .banner_area {
    padding: 50px 0;
  }
  .banner_area .banner_inner .txt_link .link_btn {
    padding: 12px 20px 12px 50px;
    font-size: 15px;
  }
  .banner_area .banner_block {
    width: 94%;
    margin: 0 auto;
  }
  .banner_area .banner_inner .txt_link .link_btn:before {
    background: url("/jpn/hydrogenfuelcellship/images/icon_arrow_white.png") no-repeat left 25px center;
    background-size: 15%;
  }
}

@media screen and (max-width:767px) {
  .banner_area {
    padding: 8vw 0 13.867vw;
  }
  .banner_area .banner_inner .txt_link .link_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: auto;
    min-width: 54.667vw;
    padding: 3.467vw 4vw 3.467vw 9.6vw;
    font-size: 3.733vw;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .banner_area .banner_inner .txt_link .link_btn:before {
    top: 50%;
    left: 10.333vw;
    width: 5.333vw;
    height: 5.467vw;
    background: url("/jpn/hydrogenfuelcellship/images/icon_arrow_white.png") no-repeat left center;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    background-size: 100%;
  }
  .banner_area .banner_inner .txt_link {
    bottom: 4.333vw;
  }
}

/*  FAQ_AREA
**************************************************************/
.faq_area h2 {
  color: #215BBA;
  font-weight: bold;
  font-family: 'Akshar', sans-serif;
  text-align: center;
}
.faq_area .faq_block {
  max-width: 960px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 5px 5px 5px 0px rgba(35,24,21,0.2);
  -webkit-box-shadow: 5px 5px 5px 0px rgba(35,24,21,0.2);
  -moz-box-shadow: 5px 5px 5px 0px rgba(35,24,21,0.2);
}
.faq_body {
  display: none;
}
.faq_header {
  display: block;
  position: relative;
  margin: 0 auto;
  text-decoration: none;
}
.faq_header:hover {
  text-decoration: none;
}
.faq_header .txt_open {
  display: block;
  color: #215BBA;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Akshar', sans-serif;
  text-align: center;
}
.faq_list {
  font-family: "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
}
.faq_list li:not(:last-child){
  border-bottom: 2px dashed #e4e5e5;
}
.faq_list .faq_question,
.faq_list .faq_answer {
  position: relative;
}
.faq_list .faq_question {
  color: #215BBA;
  font-weight: bold;
}
.faq_list .faq_answer {
  color: #000;
}
.faq_list .faq_question:before,
.faq_list .faq_answer:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.faq_list .faq_question:before {
  color: #215BBA;
  content: 'Q.';
}
.faq_list .faq_answer:before {
  color: #000;
  content: 'A.';
}

@media print, screen and (min-width: 768px) {
  .faq_area {
    padding: 110px 0 220px;
    background: url("/jpn/hydrogenfuelcellship/images/bg_shadow_gray.png") bottom center no-repeat #E5E5E5;
    background-size: contain;
  }
  .faq_area h2 {
    font-size: 84px;
  }
  .faq_area h2 .txt_small {
    font-size: 50px;
  }
  .faq_header {
    width: 80px;
    height: 80px;
    background: url("/jpn/hydrogenfuelcellship/images/icon_plus.png") center no-repeat;
  }
  .faq_area .faq_block {
    padding: 30px 50px 60px;
    border-radius: 50px;
  }
  .faq_list .faq_question,
  .faq_list .faq_answer {
    padding-left: 23px;
    font-size: 18px;
  }
  .faq_list .faq_answer {
    margin-top: 10px;
  }
  .faq_list li:not(:last-child){
    padding-bottom: 46px;
    border-width: 3px;
  }
  .faq_list li:not(:first-child){
    margin-top: 50px;
  }
  .faq_header .txt_open {
    padding-top: 85px;
  }
  .faq_body {
    margin-top: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
  .faq_area {
    padding: 55px 0 110px;
  }
  .faq_list .faq_question, .faq_list .faq_answer {
    font-size: 16px;
  }
  .link_col a .txt_box .link_txt span {
    font-size: 20px;
  }
}

@media screen and (max-width:767px) {
  .faq_area {
    padding: 10.667vw 0 22.667vw;
    background: url("/jpn/hydrogenfuelcellship/images/bg_shadow_gray_sp.png") bottom center no-repeat #E5E5E5;
    background-size: contain;
  }
  .faq_area h2 {
    font-size: 11.200vw;
  }
  .faq_area h2 .txt_small {
    font-size: 6.667vw;
  }
  .faq_header {
    width: 14.667vw;
    height: 19.667vw;
    background: url("/jpn/hydrogenfuelcellship/images/icon_plus.png") top center no-repeat;
    background-size: 10.667vw !important;
  }
  .faq_area .faq_block {
    padding: 5.333vw 6.667vw;
    border-radius: 40px;
  }
  .faq_list .faq_question,
  .faq_list .faq_answer {
    padding-left: 4vw;
    font-size: 3.333vw;
  }
  .faq_list .faq_answer {
    margin-top: 2vw;
  }
  .faq_list li:not(:last-child){
    padding-bottom: 6.667vw;
    border-width: 2px;
  }
  .faq_list li:not(:first-child){
    margin-top: 6.667vw;
  }
  .faq_header .txt_open {
    padding-top: 12.667vw;
    font-size: 3.733vw;
  }
  .faq_body {
    margin: 2.667vw 0 6vw;
  }
}

@media only screen and (device-width: 614px) and (device-height: 288px) and (orientation:landscape) {
  .mv_txt {
    top: 18% !important;
    left: 3% !important;
    max-width: 45vw !important;
  }
  .section01_area h1.not-fixed {
    top: unset !important;
    bottom: 5vw !important;
    width: 38vw !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .scroll_inner {
    bottom: 5vw !important;
  }
  #scrollGuide {
    left: 0 !important;
    height: 2.2em !important;
  }
  .section01_area h1 {
    width: 38vw !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .section01_area .txt_content {
    margin-top: 18vw !important;
  }
  .sec01_block01 {
    padding: 15.67vw 5.33vw 16vw !important;
  }
  .anchor_fixed_sp .anchor_fixed_btn.fixed {
    width: 60% !important;
  }
  .img_link {
    top: -100px !important;
  }
  .img_link img {
    max-width: 80px !important;
  }
}

@media only screen and (device-width: 740px) and (device-height: 360px) and (orientation:landscape) {
  #heading01.not-fixed {
      top: 200px !important;
      width: 35vw !important;
  }
  #heading01{
      top: 200px !important;
      width: 35vw !important;
  }
}

@media only screen and (device-width: 653px) and (device-height: 280px) and (orientation:landscape) {
  #heading01.not-fixed {
    top: 170px !important;
    width: 35vw !important;
  }
  #heading01{
    width: 35vw !important;
  }
  .mv_bg .mv_ttl_wrap {
    margin-top: 60px !important;
  }
  #scrollGuide {
    height: 30px !important;
  }
  .scroll_inner {
    bottom: 30px !important;
  }
}

@media only screen and (device-width: 640px) and (device-height: 360px) and (orientation:landscape) {
  #heading01.not-fixed {
    width: 35vw !important;
  }
  #heading01{
    width: 35vw !important;
  }
  .mv_bg .mv_ttl_wrap {
    margin-top: 60px !important;
  }
}

@media only screen and (device-width: 844px) and (device-height: 390px) and (orientation:landscape) {
  .link_container {
    bottom: 5% !important;
  }
  .mainvisual_area .mv_txt {
    max-width: 11.47vw !important;
  }
}

@media screen and (max-width:280px) {
  #hy_header .hy_header_logo_wrap .hy_header_logo {
    margin-right: 8px !important;
  }
  #hy_header .hy_header_logo_wrap .hy_header_logo_txt {
    font-size: 9px !important;
  }
}

@media only screen and (min-width: 768px) {
  .section01_area h1 {
    text-align: center;
  }
  .section01_area h1 img,
  .section01_area h1.not-fixed img {
    width: 71%;
  }
}

.mv_ttl_wrap_leftBtn {
  text-align: right;
}
/* .mv_ttl_wrap_rightBtn {
  margin-top: 22px;
}
@media only screen and (max-width: 768px) {
  .mv_ttl_wrap_leftBtn {
    text-align: left;
    margin-top: 20px;
    margin-right: -18px;
  }
  .mv_ttl_wrap_rightBtn {
    margin-top: -123px;
  }
} */

/*追記250612*/
.video_block .imgtxt_hor_2_1 .youtube_thum{
  margin-top: 25px;
}
@media screen and (max-width:767px) {
  .video_block .imgtxt_hor_2_1 .youtube_thum{
    margin-top: 3.67vw;
  }
}