.text-white {color:#ffffff;}
.text-blue {color:#0097e0;}
.text-center {text-align: center;}
.text-shadow {text-shadow: 3px 3px 15px #111111;}
.text-title-bold {font-family: "kan415typos-std",sans-serif;}

.margin-t-0 {
    margin-top: 0;
}

#contents {
    max-width: none;
    font-family: "ShueiGoKin-L", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.hydrogen-wrapper {
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
}

.hydrogen-pad {
    padding-left: 10px;
    padding-right: 10px; 
}

.hydrogen-banner {
    position: relative;
    z-index: 10;
    overflow: hidden;
    margin-bottom: 4px;
    padding-bottom: 80px;
}

.hydrogen-banner-link {
    display: block;
}

.hydrogen-banner-parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: cover;
}

.hydrogen-banner-parallax-1 {
    background-image: url("../img/hydrogen-top-1.jpg");
    height: 752px;
}

.hydrogen-banner-parallax-1-clouds {
    position: absolute;
    top: 0;
    background-image: url("../img/hydrogen-top-1-clouds.png");
    background-size: 100%;
    width: 100%;
    height: 832px;
}

.hydrogen-banner-parallax-1-clouds-1 {
    position: absolute;
    bottom: -100%;
    left: 0px;
    background: url("../img/hydrogen-top-1-clouds-1-2.png") no-repeat;
    background-size: 100%;
    width: 450px;
    height: 833px;
    animation: clouds1 12s linear 0s infinite;
    -webkit-animation: clouds1 12s linear 0s infinite;
    -moz-animation: clouds1 12s linear 0s infinite;
    -o-animation: clouds1 12s linear 0s infinite;
}

.hydrogen-banner-parallax-1-clouds-2 {
    position: absolute;
    bottom: -100%;
    right: -100px;
    background: url("../img/hydrogen-top-1-clouds-1-2.png") no-repeat;
    background-size: 100%;
    width: 450px;
    height: 833px;
    animation: clouds1 8s linear 1s infinite;
    -webkit-animation: clouds1 8s linear 1s infinite;
    -moz-animation: clouds1 8s linear 1s infinite;
    -o-animation: clouds1 8s linear 1s infinite;
}

.hydrogen-banner-parallax-1-clouds-3 {
    position: absolute;
    bottom: -100%;
    right: 15%;
    background: url("../img/hydrogen-top-1-clouds-3-2.png") no-repeat;
    background-size: 100%;
    width: 491px;
    height: 342px;
    animation: clouds1 10s linear 0s infinite;
    -webkit-animation: clouds1 10s linear 0s infinite;
    -moz-animation: clouds1 10s linear 0s infinite;
    -o-animation: clouds1 10s linear 0s infinite;
}

@-webkit-keyframes clouds1 {
    100% {bottom:100%;}
}
@-moz-keyframes clouds1 {
    100% {bottom:100%;}
}
@-o-keyframes clouds1 {
    100% {bottom:100%;}
}
@keyframes clouds1 {
    100% {bottom:100%;}
}

.hydrogen-banner-title-1 {
    margin-top: 250px;
    font-size: 70px;
    font-weight: normal;
}

.hydrogen-banner-logo {
    margin: 20px auto;
    max-width: 340px;
}

.hydrogen-banner-2 {
    background: url("../img/hydrogen-top-2.jpg") no-repeat;
    background-size: 100%;
    background-size: cover;
    background-position: 50%;
    height: 304px;
}

.hydrogen-banner-2-text {
    font-size: 20px;
    line-height: 3.2em;
}

.hydrogen-banner-std {
    background-size: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    height: 500px;
}

.hydrogen-banner-3 {
    background-image: url("../img/hydrogen-top-3.jpg");
}

.hydrogen-banner-4 {
    background-image: url("../img/hydrogen-top-4.jpg");
}

.hydrogen-banner-5 {
    background-image: url("../img/hydrogen-top-5.jpg");
}

.hydrogen-banner-title-std {
    display: inline-block;
    position: relative;
    margin-top: 18px;
    font-family: "kan415typos-std",sans-serif;
    font-size: 52px;
    line-height: 1.4em;
    font-weight: normal;
    letter-spacing: 6px;
}

.hydrogen-banner-title-btn:after {
    content: "";
    display: block;
    position: absolute;
    top: 30%;
    right: -100px;
    width: 75px;
    height: 75px;
    background: url("../img/right-arrow-btn.png") no-repeat;
}

.hydrogen-banner-title-btn-blue:after {
    background: url("../img/right-arrow-btn-blue.png") no-repeat;
}

.scroll-btn {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -40px;
}

.scroll-btn:hover {
    animation: bounce 0.8s infinite;
    -webkit-animation: bounce 0.8s infinite;
    -moz-animation: bounce 0.8s infinite;
    -o-animation: bounce 0.8s infinite;
}
 
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    50% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    50% {-moz-transform: translateY(-15px);}
}
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    50% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    50% {transform: translateY(-15px);}
}

.scroll-btn-1 {
    width: 90px;
    height: 75px;
    background: url("../img/scroll-btn.png") no-repeat;
}

.scroll-btn-2 {
    width: 90px;
    height: 75px;
    background: url("../img/scroll-arrow-btn.png") no-repeat;
}

.hydrogen-section {
    margin-bottom: 4px;
    padding: 30px 0;
}

.hydrogen-section-blue {
    background: #004a9f; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #004a9f 0%, #00b8ee 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #004a9f 0%,#00b8ee 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #004a9f 0%,#00b8ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004a9f', endColorstr='#00b8ee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.hydrogen-section-green {
    background: #14870c; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #14870c 0%, #4cc922 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #14870c 0%,#4cc922 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #14870c 0%,#4cc922 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14870c', endColorstr='#4cc922',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.hydrogen-section-orange {
    background: #e58816; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #e58816 1%, #efbd6b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #e58816 1%,#efbd6b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #e58816 1%,#efbd6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e58816', endColorstr='#efbd6b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.hydrogen-section-title {
    margin-bottom: 80px;
    font-family: "kan415typos-std",sans-serif;
    font-size: 3.4em;
    font-weight: normal;
}

.hydrogen-box {
    margin-bottom: 100px;
}

.hydrogen-box:after {
    content: "";
    display: block;
    height: 12px;
    background: url('../img/box-shadow.png') no-repeat 50% top;
    background-size: 980px;
}

.hydrogen-box-left {
    float: left;
    width: 48%;
}

.hydrogen-box-right {
    float: right;
    width: 48%;
}

.hydrogen-box-content {
    position: relative;
    background-color: #ffffff;
    background-color: rgba(255,255,255,0.97);
}

.hydrogen-box-head {
    position: relative;
    padding-top: 8px;
}

.hydrogen-box-head-number {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 110px;
    height: 110px;
    border-radius: 55px;
    background: #00b1dd; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #77d9ea 0%, #00b1dd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #77d9ea 0%,#00b1dd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #77d9ea 0%,#00b1dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77d9ea', endColorstr='#00b1dd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    text-align: center;
}

.hydrogen-box-head-green .hydrogen-box-head-number {
    background: #77d657; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #77d657 0%, #39b513 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #77d657 0%,#39b513 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #77d657 0%,#39b513 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77d657', endColorstr='#39b513',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.hydrogen-box-head-orange .hydrogen-box-head-number {
    background: #f2ae5c; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #f2ae5c 0%, #dd8923 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #f2ae5c 0%,#dd8923 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #f2ae5c 0%,#dd8923 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ae5c', endColorstr='#dd8923',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.hydrogen-box-head-right .hydrogen-box-head-number {
    left: initial;
    right: -16px;
}

.hydrogen-box-head-number .inner {
    display: inline-block;
    width: 110px;
    height: 110px;
    font-family: "kan415typos-std",sans-serif;
    font-size: 4em;
    line-height: 100px;
    color: #ffffff;
}

.hydrogen-about .hydrogen-box-head-number .inner {
    background: url('../img/about/hydrogen-about-circle-text.png') no-repeat 50% 6px;
}

.hydrogen-supply-chain .hydrogen-box-head-number .inner {
    background: url('../img/supply-chain/hydrogen-supply-chain-circle-text.png') no-repeat 50% 6px;
}

.hydrogen-technology .hydrogen-box-head-number .inner {
    background: url('../img/technology/hydrogen-technology-circle-text.png') no-repeat 50% 6px;
}


.hydrogen-box-section {
    padding: 10px 40px 40px;
}

.hydrogen-box-text:last-child {
    margin-bottom: 0;
}

.hydrogen-box-title {
    margin-top: 0;
    margin-bottom: 30px;
    border: #00b8ee 2px;
    border-bottom-style: dashed;
    padding-left: 11%;
    padding-right: 5%;
    padding-bottom: 14px;
    font-family: "kan415typos-std",sans-serif;
    font-size: 2.5em;
    font-weight: normal;
    line-height: 1.25em;
}

.hydrogen-box-head-green .hydrogen-box-title {
    border-bottom-color: #4cc922;
}

.hydrogen-box-head-orange .hydrogen-box-title {
    border-bottom-color: #edab42;
}

.hydrogen-box-head-right .hydrogen-box-title {
    text-align: right;
}

.hydrogen-box-text {
    margin-top: 0;
    font-size: 1.1em;
    line-height: 1.8em;
}

.hydrogen-box-text-bold {
    display: block;
    font-weight: bold;
}

.hydrogen-box-text-small {
    display: block;
    font-size: .7em;
}

.hydrogen-footer-links {
    margin-top: 30px;
}

.hydrogen-footer-link {
    margin-bottom: 10px;
    margin-right: 0.8%;
    float: left;
    width: 32.8%;
}

.hydrogen-footer-link:last-child {
    margin-right: 0;
}

/* 2018.11.21 supply-chain.html 追加分 */
.hydrogen-box-catalog {
    position: relative;
    margin-top: 30px;
    border: 1px solid #3398CE;
    padding: 10px;
}

.hydrogen-box-catalog-heading {
    display: inline-block;
    position: absolute;
    top: -12px;
    right: 0;
    left: 0;
    width: 240px;
    margin: auto;
    font-weight: bold;
    font-size: 20px;
    background: #fff;
}

.hydrogen-button-2col {
    margin-top: 20px;
}

.hydrogen-button-2col a {
    display: block;
    float: left;
    width: 49%;
    margin-right: 2%;
    padding: 10px;
    border: 2px solid #0086D1;
    font-weight: bold;
    color: #fff;
    background: #0086D1;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.hydrogen-button-2col a:hover {
    color: #EA5504;
    background: #fff;
}

.hydrogen-button-2col a:nth-child(2n) {
    margin-right: 0;
}

.hydrogen-button-2col a:nth-child(n+3) {
    margin-top: 10px;
}

.hydrogen-button-2col .fas{
    padding-left: 5px;
    font-size: 24px;
}
/* 【End】2018.11.21 supply-chain.html 追加分 */



/*-----------------------------------------------------------
///////////////以下、SP用///////////////
-----------------------------------------------------------*/

/*@media only screen and (max-device-width: 1300px) and (max-width: 640px) {*/
@media only screen and (max-width: 640px) {
    .hide-sp {
        display: none;
    }

    .hydrogen-wrapper {
        width: 96%;
        padding-left: 2%;
        padding-right: 2%;
    }
    
    .hydrogen-banner {
        left: 0;
        width: 100%;
    }

    .hydrogen-banner-parallax-1 {
        height: initial;
    }

    .hydrogen-banner-title-1 {
        margin-top: 50px;
        font-size: 50px;
    }

    .hydrogen-banner-title-std {
        font-size: 40px;
        line-height: 1.4em;
    }

    .hydrogen-banner-2 {
        height: initial;
    }

    .hydrogen-banner-2-text {
        line-height: 2em;
    }

    .hydrogen-banner-std {
        background-position-x: 50%;
        height: 400px;
    }

    .hydrogen-banner-title-btn:after {
        top: initial;
        bottom: -75px;
        right: 36%;
    }

    .hydrogen-section-title {
        font-size: 2em;
    }

    .hydrogen-box-section {
        padding: 10px 25px 25px;
    }

    .hydrogen-box:after {
        background-size: 96%;
    }

    .hydrogen-box-left, .hydrogen-box-right {
        width: 100%!important;
    }

    .hydrogen-box-head {
        padding-top: 55px;
    }

    .hydrogen-box-head-number {
        top: -60px;
        left: 50%;
        margin-left: -55px;
    }

    .hydrogen-box-head-right .hydrogen-box-head-number {
        right: 50%;
        margin-right: -55px;
    }

    .hydrogen-box-title {
        font-size: 2em;
    }

    .hydrogen-box-head-right .hydrogen-box-title {
        text-align: left;
    }

    .hydrogen-footer-link {
        width: 100%;
    }
    
    /* 2018.11.21 supply-chain.html 追加分 */
    .hydrogen-button-2col a {
        float: none;
        width: auto;
        margin-top: 10px;
        margin-right: 0;
    }
    /* 【End】2018.11.21 supply-chain.html 追加分 */

}