@charset "utf-8";

/* ────────────────────── *
 *                                              *
 * ページ共通                                   *
 *                                              *
 * ────────────────────── */

/* 見出し */
#title {
    color: #fff;
    width: 100%;
    height: 55.0rem;
    padding-bottom: 2.0rem;
    margin-bottom: 7.0rem;
    box-sizing: border-box;
}
.steel-future #title {
    background: url("/saiyou/image/steel/future/mainvisual.jpg") no-repeat center center / cover;
}
.steel-global #title {
    background: url("/saiyou/image/steel/global/mainvisual.jpg") no-repeat center center / cover;
}
.steel-attempt #title {
    background: url("/saiyou/image/steel/attempt/mainvisual.jpg") no-repeat center center / cover;
}
.steel-each-person #title {
    background: url("/saiyou/image/steel/each-person/mainvisual.jpg") no-repeat center center / cover;
    height: 21.0rem;
    margin-bottom: 0;
}
#title .inner {
    text-align: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -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;
}
#title .inner h1 {
    font-size: 4.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-bottom: 2.0rem;
}
#title .inner p.en {
    font-family: "Manrope", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.15em;
}
.steel-each-person #title .inner {
    padding: 0 9.0rem;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

/* コンテンツ枠 */
.contents {
    width: 100%;
}
.contents .inner {
    width: 108.0rem;
    margin: 0 auto;
}
.contents .inner p.txt-intro {
    font-size: 1.6rem;
    line-height: 2.5;
    font-weight: 500;
    text-align: center;
    margin: 0 auto 10.0rem;
}

/* ────────────────────── *
 *                                              *
 * 次のコンテンツ                               *
 *                                              *
 * ────────────────────── */

.contents #next-contents {
    background: rgb(91,52,66);
    background: -moz-linear-gradient(-225deg, rgba(91,52,66,1) 0%, rgba(43,66,101,1) 100%);
    background: -webkit-linear-gradient(-225deg, rgba(91,52,66,1) 0%, rgba(43,66,101,1) 100%);
    background: linear-gradient(-225deg, rgba(91,52,66,1) 0%, rgba(43,66,101,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5b3442",endColorstr="#2b4265",GradientType=1);
    padding: 6.5rem 0;
}
.contents #next-contents .inner {
    width: 90.81272084805654%;
    max-width: 128.5rem;
    margin: 0 auto;
    position: relative;
}
.contents #next-contents.one .inner::after {
    content: "";
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2095%209%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20style%3D%22enable-background%3Anew%200%200%2095%209%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2295%2C4.5%2087%2C0%2087%2C4%200%2C4%200%2C5%2087%2C5%2087%2C9%20%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    width: 9.5rem;
    height: 0.9rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-0.4rem);
    pointer-events: none;
}
.contents #next-contents .inner h2 {
    width: 71.8rem;
    position: absolute;
    left: calc(55.5rem + 6.5rem);
    top: 0;
    white-space: nowrap;
    pointer-events: none;
}
.contents #next-contents .inner #next-page a {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.contents #next-contents .inner #next-page p.image {
    width: 55.5rem;
    margin-right: 6.5rem;
    overflow: hidden;
    flex-shrink: 0;
}
.contents #next-contents .inner #next-page p.image img {
    transform: scale(1);
    opacity: 1;
    transition: opacity .5s, transform .5s;
}
.contents #next-contents .inner #next-page a:hover p.image img {
    transform: scale(1.1);
    opacity: 0.8;
}
.contents #next-contents .inner #next-page dl.cname {
    margin-top: 4.0rem;
    transition: opacity .5s;
}
.contents #next-contents .inner #next-page a:hover dl.cname {
    opacity: 0.8;
}
.contents #next-contents .inner #next-page dl.cname dt {
    font-size: 3.6rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 3.0rem;
}
.contents #next-contents .inner #next-page dl.cname dd {
    font-size: 1.5rem;
    line-height: 2;
    color: #9a9ba2;
}

/* 複数バージョン */
.contents #next-contents.two {
    padding: 11.0rem 0;
}
.contents #next-contents.two .inner {
    width: 95.96412556053812%;
    max-width: 107.0rem;
}
.contents #next-contents.two .inner h2 {
    font-family: "Manrope", sans-serif;
    font-size: 5.6rem;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.1);
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0 auto 5.0rem;
    position: static;
    white-space: normal;
    pointer-events: auto;
}
.contents #next-contents .inner #next-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.contents #next-contents .inner #next-list .list {
    background: #fff;
    width: 48.5981308411215%;
}
.contents #next-contents .inner #next-list .list a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.contents #next-contents .inner #next-list .list p.image {
    width: 50%;
    overflow: hidden;
}
.contents #next-contents .inner #next-list .list p.image img {
    transform: scale(1);
    opacity: 1;
    transition: opacity .5s, transform .5s;
}
.contents #next-contents .inner #next-list .list a:hover p.image img {
    transform: scale(1.1);
    opacity: 0.8;
}
.contents #next-contents .inner #next-list .list p.cname {
    font-size: 2.2rem;
    line-height: 1.272727272727273;
    width: 50%;
    padding-right: 2.0rem;
    box-sizing: border-box;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    transition: opacity .5s;
}
.contents #next-contents .inner #next-list .list a:hover p.cname {
    opacity: 0.8;
}
.contents #next-contents .inner #next-list .list p.cname::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #006de1;
    position: absolute;
    right: 2.0rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ────────────────────── *
 *                                              *
 * 鉄の可能性と未来の可能性                     *
 *                                              *
 * ────────────────────── */

.steel-future .contents .inner ul.pagination {
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 500;
    font-feature-settings: "palt" 1;
    color: #fff;
    text-align: right;
    margin: 0 auto 9.0rem;
    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;
}
.steel-future .contents .inner ul.pagination li {
    background : -moz-linear-gradient(32.92% -89.85% -60deg,rgba(240, 40, 50, 1) 0%,rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-linear-gradient(-60deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-gradient(linear,32.92% -89.85% ,67.08% 189.85% ,color-stop(0,rgba(240, 40, 50, 1) ),color-stop(0.9996,rgba(0, 110, 225, 1) ));
    background : -o-linear-gradient(-60deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -ms-linear-gradient(-60deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832', endColorstr='#006EE1' ,GradientType=0)";
    background : linear-gradient(150deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    opacity : 0.8;
    filter: alpha(opacity=80) progid:DXImageTransform.Microsoft.Alpha(opacity=80) progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832',endColorstr='#006EE1' , GradientType=1);
    width: 26.0rem;
    position: relative;
    overflow: hidden;
}
.steel-future .contents .inner ul.pagination li a {
    display: block;
    padding: 1.6rem 1.5rem 1.6rem 0;
}
.steel-future .contents .inner ul.pagination li span.num {
    font-family: "Manrope", sans-serif;
    font-size: 5.6rem;
    opacity: 0.3;
    letter-spacing: -0.08em;
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
}

/* セクションタイトル */
.steel-future .contents .section-title {
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    width: 100%;
    height: calc(100vw * 440 / 1600);
    min-height: 44.0rem;
    margin-bottom: 9.0rem;
    position: relative;
}
.steel-future .contents .section-title#section-01 {
    background-image: url("/saiyou/image/steel/future/bg-section-01.jpg");
}
.steel-future .contents .section-title#section-02 {
    background-image: url("/saiyou/image/steel/future/bg-section-02.jpg");
}
.steel-future .contents .section-title#section-03 {
    background-image: url("/saiyou/image/steel/future/bg-section-03.jpg");
}
.steel-future .contents .section-title#section-04 {
    background-image: url("/saiyou/image/steel/future/bg-section-04.jpg");
}
.steel-future .contents .section-title h2 {
    font-size: 6.5rem;
    line-height: 1.3;
    font-feature-settings: "palt" 1;
    color: #fff;
    letter-spacing: 0.04em;
    text-align: right;
    position: absolute;
    right: 8.0rem;
    top: 50%;
    transform: translateY(-50%);
}

/* 基本コピー */
.steel-future .contents .inner dl.body dt {
    font-size: 2.4rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding-left: 2.0rem;
    margin-bottom: 3.0rem;
    position: relative;
}
.steel-future .contents .inner dl.body dt::before {
    content: "";
    background : -moz-linear-gradient(50% 100% 90deg,rgba(240, 40, 50, 1) 0%,rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(240, 40, 50, 1) ),color-stop(0.9996,rgba(0, 110, 225, 1) ));
    background : -o-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -ms-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832', endColorstr='#006EE1' ,GradientType=0)";
    background : linear-gradient(0deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006EE1',endColorstr='#F02832' , GradientType=0);
    width: 0.4rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.steel-future .contents .inner dl.body dd {
    font-size: 1.4rem;
    line-height: 2.142857142857143;
    text-align: justify;
}

/* ジャンル */
.steel-future .contents .inner #genre {
    font-size: 1.5rem;
    font-weight: 500;
    color: #006ee1;
    background: #f2f8fd;
    text-align: center;
    width: 90.0rem;
    padding: 6.0rem 10.0rem;
    margin: 6.0rem auto 12.0rem;
    box-sizing: border-box;
}
.steel-future .contents .inner #genre ul {
    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;
}
.steel-future .contents .inner #genre ul li {
    width: 16.0rem;
    margin-bottom: 2.0rem;
}
.steel-future .contents .inner #genre ul li:nth-last-child(-n+4) {
    margin-bottom: 0;
}
.steel-future .contents .inner #genre ul li img {
    margin-bottom: 1.0rem;
}

/* 本文＆イメージ横並び */
.steel-future .contents .inner .body-with-image {
    margin: 0 auto 17.0rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.steel-future .contents .inner .body-with-image.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.steel-future .contents #section-04 + .inner .body-with-image:not(.reverse) {
    margin: 0 auto 12.0rem;
}
.steel-future .contents .inner .body-with-image dl.body {
    width: 49.0rem;
}
.steel-future .contents .inner .body-with-image p.image {
    width: 52.0rem;
}

/* 例 */
.steel-future .contents .example {
    background: #eceef1 url("../../image/steel/future/bg-example.png") no-repeat top left / auto 35.0rem;
    padding: 16.0rem 0;
    position: relative;
}
.steel-future .contents .example p.arrow {
    width: 25.6rem;
    position: absolute;
    left: 50%;
    top: -9.0rem;
    transform: translateX(-50%);
}
.steel-future .contents .example .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.steel-future .contents .example .inner dl {
    width: 54.0rem;
}
.steel-future .contents .example .inner dl dt {
    font-size: 2.4rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 3.0rem;
}
.steel-future .contents .example .inner dl dd {
    font-size: 1.4rem;
    line-height: 2.142857142857143;
    text-align: justify;
}
.steel-future .contents .example .inner dl dd sub {
    font-size: 1.2rem;
    vertical-align: -0.1rem;
}
.steel-future .contents .example .inner dl dd a {
    font-size: 1.7rem;
    font-weight: 700;
    color: #f02832;
    text-decoration: underline;
}
.steel-future .contents .example .inner p.image {
    width: 48.0rem;
}

/* 横並びリスト */
.steel-future .contents .flex {
    margin: 0 auto 17.0rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.steel-future .contents .flex .item {
    width: 32.0rem;
    margin-right: 6.0rem;
}
.steel-future .contents .flex .item:nth-of-type(3n),
.steel-future .contents .flex .item:last-of-type {
    margin-right: 0;
}
.steel-future .contents .flex .item dl dt {
    font-size: 1.6rem;
    line-height: 1.3125;
    font-weight: 700;
    background : -moz-linear-gradient(19.14% -81.67% -45deg,rgba(240, 40, 50, 1) 0%,rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-linear-gradient(-45deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-gradient(linear,19.14% -81.67% ,80.86% 181.67% ,color-stop(0,rgba(240, 40, 50, 1) ),color-stop(0.9996,rgba(0, 110, 225, 1) ));
    background : -o-linear-gradient(-45deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -ms-linear-gradient(-45deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832', endColorstr='#006EE1' ,GradientType=0)";
    background : linear-gradient(135deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832',endColorstr='#006EE1' , GradientType=1);
    text-align: center;
    padding: 1px;
    margin-bottom: 3.5rem;
    position: relative;
}
.steel-future .contents .flex .item dl dt::before {
    content: "";
    background: #fff;
    width: 3.0rem;
    height: 3.0rem;
    position: absolute;
    left: 50%;
    bottom: -1.5rem;
    transform: translateX(-50%);
}
.steel-future .contents .flex .item dl dt::after {
    content: "";
    background : -moz-linear-gradient(50% 100% 90deg,rgba(240, 40, 50, 1) 0%,rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(240, 40, 50, 1) ),color-stop(0.9996,rgba(0, 110, 225, 1) ));
    background : -o-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -ms-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832', endColorstr='#006EE1' ,GradientType=0)";
    background : linear-gradient(0deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006EE1',endColorstr='#F02832' , GradientType=0);
    width: 1px;
    height: 2.4rem;
    position: absolute;
    left: 50%;
    top: calc(100% - 0.6rem);
}
.steel-future .contents .flex .item dl dt span {
    background: #fff;
    height: 7.3rem;
    padding: 0 2.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.steel-future .contents .flex .item dl dd p.image {
    margin-bottom: 2.0rem;
}
.steel-future .contents .flex .item dl dd p.txt {
    font-size: 1.4rem;
    line-height: 2.142857142857143;
    text-align: justify;
}

/* ────────────────────── *
 *                                              *
 * グローバルビジネスとしての鉄                 *
 *                                              *
 * ────────────────────── */

.steel-global .contents .section-title {
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    width: 100%;
    height: calc(100vw * 440 / 1600);
    min-height: 44.0rem;
    position: relative;
}
.steel-global .contents .section-title#section-01 {
    background-image: url("/saiyou/image/steel/global/bg-section-01.jpg");
}
.steel-global .contents .section-title#section-02 {
    background-image: url("/saiyou/image/steel/global/bg-section-02.jpg");
}
.steel-global .contents .section-title h2 {
    font-size: 3.6rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 16.0rem;
    transform: translateX(-50%);
}
.steel-global .contents .section-title h2 span.wrap {
    background: #006ee1;
    display: inline-block;
    padding: 0.5rem 1.0rem;
}

.steel-global .contents .inner.article {
    background: #fff;
    padding: 12.0rem;
    margin-top: -13.0rem;
    margin-bottom: 3.0rem;
    position: relative;
    box-sizing: border-box;
}
.steel-global .contents .inner.article::before {
    content: "";
    background : -moz-linear-gradient(50% -4842.11% 90deg,rgba(0, 110, 225, 1) 0.04%,rgba(240, 40, 50, 1) 100%);
    background : -webkit-linear-gradient(90deg, rgba(0, 110, 225, 1) 0.04%, rgba(240, 40, 50, 1) 100%);
    background : -webkit-gradient(linear,50% -4842.11% ,50% -4942.11% ,color-stop(0.0004,rgba(0, 110, 225, 1) ),color-stop(1,rgba(240, 40, 50, 1) ));
    background : -o-linear-gradient(90deg, rgba(0, 110, 225, 1) 0.04%, rgba(240, 40, 50, 1) 100%);
    background : -ms-linear-gradient(90deg, rgba(0, 110, 225, 1) 0.04%, rgba(240, 40, 50, 1) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#006EE1', endColorstr='#F02832' ,GradientType=0)";
    background : linear-gradient(0deg, rgba(0, 110, 225, 1) 0.04%, rgba(240, 40, 50, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832',endColorstr='#006EE1' , GradientType=0);
    width: 0.3rem;
    height: 9.5rem;
    position: absolute;
    left: 50%;
    top: -4.0rem;
    transform: translateX(-50%);
}

/* 基本コピー */
.steel-global .contents .inner.article dl.body {
    margin-bottom: 6.0rem;
}
.steel-global .contents .inner.article dl.body dt {
    font-size: 2.4rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding-left: 2.0rem;
    margin-bottom: 3.0rem;
    position: relative;
}
.steel-global .contents .inner.article dl.body dt::before {
    content: "";
    background : -moz-linear-gradient(50% 100% 90deg,rgba(240, 40, 50, 1) 0%,rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(240, 40, 50, 1) ),color-stop(0.9996,rgba(0, 110, 225, 1) ));
    background : -o-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -ms-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832', endColorstr='#006EE1' ,GradientType=0)";
    background : linear-gradient(0deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006EE1',endColorstr='#F02832' , GradientType=0);
    width: 0.4rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.steel-global .contents .inner.article dl.body dd {
    font-size: 1.4rem;
    line-height: 2.142857142857143;
    text-align: justify;
}
.steel-global .contents .inner.article p.image {
    width: 72.0rem;
    margin: 0 auto 11.0rem;
}
.steel-global .contents .inner.article p.image:last-of-type {
    margin: 0 auto;
}
.steel-global .contents .inner.article p#overseas-office {
    margin: 0 auto 7.5rem;
}
.steel-global .contents .inner.article p#worldmap {
    margin: 0 -12.0rem 16.0rem;
}

/* 本文＆イメージ横並び */
.steel-global .contents .inner.article .body-with-image {
    margin: 0 auto 10.0rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.steel-global .contents .inner.article .body-with-image dl.body {
    width: 48.0rem;
    margin-bottom: 0;
}
.steel-global .contents .inner.article .body-with-image p.image {
    width: 31.0rem;
    margin-bottom: 0;
}

/* ────────────────────── *
 *                                              *
 * JFEスチールの最新の取り組み                  *
 *                                              *
 * ────────────────────── */

.steel-attempt .contents .inner.article {
    width: 100%;
    max-width: 141.5rem;
}
.steel-attempt .contents .inner.article .attempt {
    width: 124.5rem;
    margin-bottom: 15.0rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.steel-attempt .contents .inner.article .attempt.reverse {
    margin-left: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.steel-attempt .contents .inner.article .attempt p.image {
    width: 66.0rem;
}
.steel-attempt .contents .inner.article .attempt .movie {
    width: 66.0rem;
}
.steel-attempt .contents .inner.article .attempt .movie .iframe iframe {
    width: 100%;
}
.steel-attempt .contents .inner.article .attempt .movie p.caption {
    font-size: 1.4rem;
    font-weight: 500;
    color: #006ee1;
    margin: 1.0rem 1.0rem 0;
}
.steel-attempt .contents .inner.article .attempt dl.body {
    width: 51.0rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dt {
    font-size: 2.2rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    padding-bottom: 2.5rem;
    margin-bottom: 3.0rem;
    position: relative;
}
.steel-attempt .contents .inner.article .attempt dl.body dt::before {
    content: "";
    background : -moz-linear-gradient(0% 50% 0deg,rgba(240, 40, 50, 1) 0%,rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-linear-gradient(0deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(240, 40, 50, 1) ),color-stop(0.9996,rgba(0, 110, 225, 1) ));
    background : -o-linear-gradient(0deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -ms-linear-gradient(0deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832', endColorstr='#006EE1' ,GradientType=0)";
    background : linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832',endColorstr='#006EE1' , GradientType=1);
    width: 100%;
    height: 0.2rem;
    position: absolute;
    left: 0;
    bottom: 0;
}
.steel-attempt .contents .inner.article .attempt dl.body dd {
    font-size: 1.6rem;
    line-height: 1.875;
    text-align: justify;
}
.steel-attempt .contents .inner.article .attempt dl.body dd sub {
    font-size: 1.2rem;
    vertical-align: -0.1rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd a {
    font-size: 1.7rem;
    font-weight: 700;
    color: #f02832;
    text-decoration: underline;
}
.steel-attempt .contents .inner.article .attempt dl.body dd p.award {
    margin-top: 3.5rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio {
    background: rgba(54, 55, 70, 0.05);
    text-align: center;
    padding: 3.5rem;
    margin-top: 2.0rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head {
    font-size: 1.9rem;
    color: #006ee1;
    margin-bottom: 1.0rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head sup {
    font-size: 1.4rem;
    vertical-align: 0.5rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head em {
    font-size: 3.0rem;
    font-weight: 700;
    font-style: normal;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head em span.num {
    font-family: "Manrope", sans-serif;
    font-size: 7.2rem;
    line-height: 1;
    font-weight: 600;
    vertical-align: -0.8rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head + p {
    font-size: 1.3rem;
    font-weight: 300;
}

/* 最先端の取り組みを支える土台 */
.steel-attempt .contents #base {
    background: #eceef1;
    text-align: center;
    padding: 13.0rem 0 20.0rem;
}
.steel-attempt .contents #base .inner {
    width: 84.0rem;
}
.steel-attempt .contents #base .inner h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 3.0rem;
}
.steel-attempt .contents #base .inner p.txt {
    font-size: 1.4rem;
    line-height: 2.142857142857143;
    width: 66.0rem;
    margin: 0 auto 10.0rem;
}
.steel-attempt .contents #base .inner .flex {
    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;
}
.steel-attempt .contents #base .inner .flex .item {
    width: 38.0rem;
    position: relative;
}
.steel-attempt .contents #base .inner .flex .item.full {
    width: 100%;
    margin-top: 11.0rem;
}
.steel-attempt .contents #base .inner .flex .item dl dt {
    font-size: 1.6rem;
    line-height: 1.3125;
    font-weight: 700;
    background : -moz-linear-gradient(19.14% -81.67% -45deg,rgba(240, 40, 50, 1) 0%,rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-linear-gradient(-45deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-gradient(linear,19.14% -81.67% ,80.86% 181.67% ,color-stop(0,rgba(240, 40, 50, 1) ),color-stop(0.9996,rgba(0, 110, 225, 1) ));
    background : -o-linear-gradient(-45deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -ms-linear-gradient(-45deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832', endColorstr='#006EE1' ,GradientType=0)";
    background : linear-gradient(135deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832',endColorstr='#006EE1' , GradientType=1);
    text-align: center;
    width: 38.0rem;
    padding: 1px;
    margin-bottom: 3.5rem;
    position: relative;
    box-sizing: border-box;
}
.steel-attempt .contents #base .inner .flex .item dl dt::before {
    content: "";
    background: #eceef1;
    width: 3.0rem;
    height: 3.0rem;
    position: absolute;
    left: 50%;
    bottom: -1.5rem;
    transform: translateX(-50%);
}
.steel-attempt .contents #base .inner .flex .item dl dt::after {
    content: "";
    background : -moz-linear-gradient(50% 100% 90deg,rgba(240, 40, 50, 1) 0%,rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(240, 40, 50, 1) ),color-stop(0.9996,rgba(0, 110, 225, 1) ));
    background : -o-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    background : -ms-linear-gradient(90deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F02832', endColorstr='#006EE1' ,GradientType=0)";
    background : linear-gradient(0deg, rgba(240, 40, 50, 1) 0%, rgba(0, 110, 225, 1) 99.96%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006EE1',endColorstr='#F02832' , GradientType=0);
    width: 1px;
    height: 2.4rem;
    position: absolute;
    left: 50%;
    top: calc(100% - 0.6rem);
}
.steel-attempt .contents #base .inner .flex .item dl dt span {
    background: #eceef1;
    height: 7.3rem;
    padding: 0 2.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.steel-attempt .contents #base .inner .flex .item dl dd p.num {
    font-size: 4.4rem;
    font-weight: 700;
    font-feature-settings: "palt" 1;
    color: #006ee1;
    white-space: nowrap;
    margin-bottom: 5.0rem;
}
.steel-attempt .contents #base .inner .flex .item dl dd p.num em {
    font-family: "Manrope", sans-serif;
    font-size: 10.0rem;
    font-weight: 600;
    letter-spacing: -0.05em;
    vertical-align: -0.3rem;
    display: inline-block;
    margin-right: 0.05em;
}
.steel-attempt .contents #base .inner .flex .item dl dd p.num span.figure {
    font-family: "Manrope", sans-serif;
    font-size: 6.0rem;
    font-weight: 600;
    letter-spacing: -0.05em;
    vertical-align: -0.3rem;
    display: inline-block;
    margin-right: 0.05em;
}
.steel-attempt .contents #base .inner .flex .item dl dd p.one-person {
    font-size: 1.8rem;
    font-weight: 500;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.05em;
}

.steel-attempt .contents #base .inner .flex .item:nth-of-type(1)::before {
    content: "";
    background: url("/saiyou/image/steel/attempt/icon-base-01.png") no-repeat center center / cover;
    width: 10.0rem;
    height: 9.2rem;
    position: absolute;
    left: 1.8rem;
    top: -3.0rem;
    z-index: 1;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(2)::before {
    content: "";
    background: url("/saiyou/image/steel/attempt/icon-base-02.png") no-repeat center center / cover;
    width: 7.8rem;
    height: 9.0rem;
    position: absolute;
    right: 2.0rem;
    top: -4.0rem;
    z-index: 1;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(2) dl dd p.num {
    margin-left: -1.5rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3)::before {
    content: "";
    background: url("/saiyou/image/steel/attempt/icon-base-03.png") no-repeat center center / cover;
    width: 16.0rem;
    height: 15.0rem;
    position: absolute;
    left: 50%;
    top: 12.0rem;
    z-index: 1;
    transform: translateX(-50%);
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dt {
    margin: 0 auto 3.5rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap {
    width: 38.0rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap p.num {
    text-align: left;
    display: inline-block;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap:nth-of-type(1) p.num {
    margin-right: 3.5rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap:nth-of-type(2) p.num {
    margin-left: 2.0rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap p.num span.area {
    font-size: 3.5rem;
    display: inline-block;
    text-align: left;
}

/* ────────────────────── *
 *                                              *
 * 一人ひとりが考える鉄の可能性                 *
 *                                              *
 * ────────────────────── */

.steel-each-person .contents .flex {
    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;
}
.steel-each-person .contents .flex .item {
    width: calc(100% / 3);
    border-bottom: 0.2rem solid #fff;
    flex-shrink: 0;
    position: relative;
}
.steel-each-person .contents .flex .item:nth-last-of-type(-n+3) {
    border-bottom: none;
}
.steel-each-person .contents .flex .item::after {
    content: "";
    background: #fff;
    width: 0.2rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.steel-each-person .contents .flex .item:nth-of-type(3n)::after {
    content: none;
}
.steel-each-person .contents .flex .item a {
    display: block;
}
.steel-each-person .contents .flex .item p.image {
    display: block;
    overflow: hidden;
}
.steel-each-person .contents .flex .item p.image img {
    transform: scale(1);
    opacity: 1;
    transition: opacity .5s, transform .5s;
}
.steel-each-person .contents .flex .item a:hover p.image img {
    transform: scale(1.1);
    opacity: 0.8;
}
.steel-each-person .contents .flex .item p.catch {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.steel-each-person .contents .flex .item dl {
    color: #fff;
    width: 100%;
    padding: 1.0rem 0;
    position: absolute;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.steel-each-person .contents .flex .item.cat-01 dl {
    background: rgba(0, 110, 225, 0.9);
}
.steel-each-person .contents .flex .item.cat-02 dl {
    background: rgba(240, 40, 50, 0.9);
}
.steel-each-person .contents .flex .item dl dt {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
    width: 15.0rem;
    padding: 0 2.0rem;
    box-sizing: border-box;
    flex-shrink: 0;
}
.steel-each-person .contents .flex .item dl dd {
    font-size: 1.4rem;
    line-height: 1.571428571428571;
    font-weight: 500;
    padding: 0 2.5rem;
    position: relative;
    white-space: nowrap;
}
.steel-each-person .contents .flex .item dl dd::before {
    content: "";
    background: #fff;
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.steel-each-person .contents .flex .item#person-03 dl dt {
    width: auto;
}
.steel-each-person .contents .flex .item#person-03 dl dd {
    padding: 0 2.0rem;
}
.steel-each-person .contents .flex .item#person-07 dl dt {
    width: auto;
}
.steel-each-person .contents .flex .item#person-07 dl dd {
    padding: 0 2.0rem;
}
.steel-each-person .contents .modal {
    display: none;
}
.modaal-wrapper {
    background: linear-gradient(135deg, rgba(240,40,50,0.1) 0%, rgba(0,110,225,0.1) 100%);
}
.modaal-container {
    max-width: 1040px;
}
.modaal-content-container {
    padding: 0;
}
.modaal-content-container .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.modaal-content-container .flex .left {
    width: 40.0rem;
    position: relative;
}
.modaal-content-container .flex .left p.image {
    height: 100%;
}
.modaal-content-container .flex .left p.image img {
    height: 100%;
    object-fit: cover;
}
.modaal-content-container .flex .left dl {
    color: #fff;
    width: 100%;
    padding: 1.0rem 0;
    position: absolute;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.modaal-content-container .flex .left.cat-01 dl {
    background: rgba(0, 110, 225, 0.9);
}
.modaal-content-container .flex .left.cat-02 dl {
    background: rgba(240, 40, 50, 0.9);
}
.modaal-content-container .flex .left dl dt {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 700;
    text-align: center;
    width: 15.0rem;
    padding: 0 2.0rem;
    box-sizing: border-box;
    flex-shrink: 0;
}
.modaal-content-container .flex .left dl dd {
    font-size: 1.4rem;
    line-height: 1.571428571428571;
    font-weight: 500;
    padding: 0 2.5rem;
    position: relative;
}
.modaal-content-container .flex .left dl dd::before {
    content: "";
    background: #fff;
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.modaal-content-container .flex.person-03 .left dl dt {
    width: auto;
}
.modaal-content-container .flex.person-07 .left dl dt {
    width: auto;
}
.modaal-content-container .flex .right {
    width: 64.0rem;
    padding: 7.0rem 8.0rem 7.0rem 7.0rem;
    box-sizing: border-box;
}
.modaal-content-container .flex .right p.catch {
    margin-bottom: 4.0rem;
}
.modaal-content-container .flex.person-03 .right p.catch {
    width: 51.2rem;
}
.modaal-content-container .flex.person-05 .right p.catch {
    width: 49.2rem;
}
.modaal-content-container .flex .right p.txt {
    font-size: 1.5rem;
    line-height: 1.866666666666667;
    font-feature-settings: "palt" 1;
    text-align: justify;
}
.modaal-content-container .flex .right p.txt sub {
    font-size: 1.2rem;
    vertical-align: -0.1rem;
}
.modaal-content-container p.btn-close {
    font-family: "Manrope", sans-serif;
    font-size: 2.0rem;
    font-weight: 600;
    color: #fff;
    position: absolute;
    right: 0;
    top: -3.5rem;
    cursor: pointer;
    transition: opacity .5s;
}
.modaal-content-container p.btn-close:hover {
    opacity: 0.8;
}
.modaal-content-container p.btn-close img {
    vertical-align: -0.5rem;
    margin-left: 1.0rem;
}
.modaal-close {
    display: none;
}