@charset "utf-8";

@media only screen and (min-width: 0px) and (max-width: 1600px) {

.contents #next-contents .inner h2 {
    width: calc((100% - (100vw * (555 + 65) / 1600) + (100vw * 55 / 1600)));
    left: calc(100vw * (555 + 65) / 1600);
}
.contents #next-contents .inner #next-page p.image {
    width: calc(100vw * 555 / 1600);
    margin-right: calc(100vw * 65 / 1600);
    overflow: hidden;
    flex-shrink: 0;
}
.contents #next-contents .inner #next-page dl.cname dt {
    font-size: calc(100vw * 36 / 1600);
    margin-bottom: calc(100vw * 30 / 1600);
}

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

.steel-each-person .contents .flex .item dl dt {
    font-size: calc(100vw * 16 / 1600);
    width: calc(100vw * 150 / 1600);
    padding: 0 calc(100vw * 20 / 1600);
}
.steel-each-person .contents .flex .item dl dd {
    font-size: calc(100vw * 14 / 1600);
    padding: 0 calc(100vw * 25 / 1600);
}
.steel-each-person .contents .flex .item#person-03 dl dd {
    padding: 0 calc(100vw * 20 / 1600);
}
.steel-each-person .contents .flex .item#person-07 dl dd {
    padding: 0 calc(100vw * 20 / 1600);
}

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

.steel-attempt .contents .inner.article .attempt {
    width: calc(100vw * 1245 / 1600);
}
.steel-attempt .contents .inner.article .attempt p.image {
    width: calc(100vw * 660 / 1600);
}
.steel-attempt .contents .inner.article .attempt .movie {
    width: calc(100vw * 660 / 1600);
}
.steel-attempt .contents .inner.article .attempt .movie .iframe iframe {
    height: calc(100vw * 360 / 1600);
}
.steel-attempt .contents .inner.article .attempt dl.body {
    width: calc(100vw * 510 / 1600);
}

}



@media only screen and (min-width: 0px) and (max-width: 750px) {

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

/* 見出し */
#title {
    height: 62.0rem;
    margin-bottom: 9.0rem;
}
.steel-future #title {
    background: url("/saiyou/image/steel/future/mainvisual-sp.jpg") no-repeat center center / cover;
}
.steel-global #title {
    background: url("/saiyou/image/steel/global/mainvisual-sp.jpg") no-repeat center center / cover;
}
.steel-attempt #title {
    background: url("/saiyou/image/steel/attempt/mainvisual-sp.jpg") no-repeat center center / cover;
}
.steel-each-person #title {
    background: url("/saiyou/image/steel/each-person/mainvisual-sp.jpg") no-repeat center center / cover;
    height: 42.0rem;
}
#title .inner h1 {
    font-size: 6.4rem;
    line-height: 1.25;
    font-feature-settings: "palt" 1;
    letter-spacing: normal;
}
#title .inner p.en {
    font-size: 2.2rem;
    line-height: 1.36;
}
.steel-each-person #title .inner {
    text-align: left;
    padding: 10.0rem 4.0rem 0 24.0rem;
}
.steel-each-person #title .inner h1 {
    font-size: 4.8rem;
    letter-spacing: 0.08em;
}
.steel-each-person #title .inner p.en {
    font-size: 2.0rem;
}

.contents .inner {
    width: 63.0rem;
}
.contents .inner p.txt-intro {
    font-size: 2.4rem;
    line-height: 2.083333333333333;
    margin: 0 auto 8.0rem;
}

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

.contents #next-contents {
    padding: 9.0rem 0 7.0rem;
}
.contents #next-contents .inner {
    width: 67.0rem;
}
.contents #next-contents.one .inner::after {
    content: none;
}
.contents #next-contents .inner h2 {
    width: 60.0rem;
    margin: 0 auto 6.0rem;
    position: static;
}
.contents #next-contents .inner #next-page a {
    display: block;
}
.contents #next-contents .inner #next-page p.image {
    width: 100%;
    margin-right: 0;
    margin-bottom: 4.5rem;
}
.contents #next-contents .inner #next-page dl.cname {
    margin-top: 0;
    position: relative;
}
.contents #next-contents .inner #next-page dl.cname::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%20110%2018%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%20110%2018%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%22110%2C9%2094%2C0%2094%2C8%200%2C8%200%2C10%2094%2C10%2094%2C18%20%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    width: 11.0rem;
    height: 1.8rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.contents #next-contents .inner #next-page dl.cname dt {
    font-size: 4.8rem;
    line-height: 1.458333333333333;
}
.contents #next-contents .inner #next-page dl.cname dd {
    font-size: 2.2rem;
    line-height: 1.818181818181818;
}

/* 複数バージョン */
.contents #next-contents.two {
    padding: 9.0rem 0 11.0rem;
}
.contents #next-contents .inner #next-list {
    display: block;
}
.contents #next-contents .inner #next-list .list {
    width: 100%;
    margin-bottom: 3.0rem;
}
.contents #next-contents .inner #next-list .list:last-of-type {
    margin-bottom: 0;
}
.contents #next-contents .inner #next-list .list p.cname {
    font-size: 3.2rem;
    padding: 0 7.0rem 0 5.0rem;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.contents #next-contents .inner #next-list .list p.cname::after {
    border-width: 1.0rem 0 1.0rem 2.0rem;
    right: 3.0rem;
}

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

.steel-future .contents .inner ul.pagination {
    font-size: 3.6rem;
    margin: 0 -1.0rem 12.0rem;
    display: block;
}
.steel-future .contents .inner ul.pagination li {
    width: 100%;
    margin-bottom: 3.0rem;
}
.steel-future .contents .inner ul.pagination li:last-child {
    margin-bottom: 0;
}
.steel-future .contents .inner ul.pagination li a {
    padding: 4.0rem;
}
.steel-future .contents .inner ul.pagination li span.num {
    font-size: 14.0rem;
    left: -4.0rem;
}

/* セクションタイトル */
.steel-future .contents .section-title {
    height: 44.0rem;
    min-height: 0;
}
.steel-future .contents .section-title#section-01 {
    background-image: url("/saiyou/image/steel/future/bg-section-01-sp.jpg");
}
.steel-future .contents .section-title#section-02 {
    background-image: url("/saiyou/image/steel/future/bg-section-02-sp.jpg");
}
.steel-future .contents .section-title#section-03 {
    background-image: url("/saiyou/image/steel/future/bg-section-03-sp.jpg");
}
.steel-future .contents .section-title#section-04 {
    background-image: url("/saiyou/image/steel/future/bg-section-04-sp.jpg");
}
.steel-future .contents .section-title h2 {
    font-size: 8.0rem;
    line-height: 1.25;
    font-feature-settings: "palt" 1;
    letter-spacing: -0.01em;
    right: 5.0rem;
    white-space: nowrap;
}

/* 基本コピー */
.steel-future .contents .inner dl.body dt {
    font-size: 3.4rem;
    padding-left: 3.0rem;
    margin-bottom: 5.0rem;
}
.steel-future .contents .inner dl.body dt::before {
    width: 0.6rem;
}
.steel-future .contents .inner dl.body dd {
    font-size: 2.4rem;
    line-height: 2.083333333333333;
}

/* 本文＆イメージ横並び */
.steel-future .contents .inner .body-with-image {
    margin: 0 auto 26.0rem;
    display: block;
}
.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: 100%;
    margin-bottom: 7.0rem;
}
.steel-future .contents .inner .body-with-image p.image {
    width: 100%;
}

/* ジャンル */
.steel-future .contents .inner #genre {
    font-size: 2.2rem;
    width: 100%;
    padding: 9.0rem 6.0rem;
    margin: 8.0rem auto;
}
.steel-future .contents .inner #genre ul li {
    width: 24.0rem;
    margin-bottom: 2.5rem;
}
.steel-future .contents .inner #genre ul li:nth-last-child(-n+4) {
    margin-bottom: 2.5rem;
}
.steel-future .contents .inner #genre ul li:nth-last-child(-n+2) {
    margin-bottom: 0;
}

/* 例 */
.steel-future .contents .example {
    background: #eceef1 url("../../image/steel/future/bg-example.png") no-repeat top left / 115% auto;
    padding: 26.0rem 0 12.0rem;
}
.steel-future .contents .example p.arrow {
    width: 44.0rem;
    top: -13.0rem;
}
.steel-future .contents .example .inner {
    display: block;
}
.steel-future .contents .example .inner dl {
    width: 100%;
    margin-bottom: 7.0rem;
}
.steel-future .contents .example .inner dl dt {
    font-size: 3.4rem;
    line-height: 1.76;
    margin-bottom: 4.0rem;
}
.steel-future .contents .example .inner dl dd {
    font-size: 2.4rem;
    line-height: 2.083333333333333;
}
.steel-future .contents .example .inner dl dd sub {
    font-size: 2.4rem;
    display: inline-block;
    transform: scale(0.6);
    vertical-align: -0.4rem;
}
.steel-future .contents .example .inner dl dd a {
    font-size: 2.8rem;
}
.steel-future .contents .example .inner p.image {
    width: 66.0rem;
    margin: 0 -1.5rem;
}

/* 横並びリスト */
.steel-future .contents .flex {
    margin: 0 auto 24.0rem;
    display: block;
}
.steel-future .contents .flex .item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8.0rem;
}
.steel-future .contents .flex .item:nth-of-type(3n) {
    margin-bottom: 8.0rem;
}
.steel-future .contents .flex .item:last-of-type {
    margin-bottom: 0;
}
.steel-future .contents .flex .item dl dt {
    font-size: 2.6rem;
    padding: 0.2rem;
    margin-bottom: 7.0rem;
}
.steel-future .contents .flex .item dl dt::before {
    width: 6.0rem;
    height: 6.0rem;
    bottom: -3.0rem;
}
.steel-future .contents .flex .item dl dt::after {
    width: 0.2rem;
    height: 4.8rem;
    top: calc(100% - 1.2rem);
}
.steel-future .contents .flex .item dl dt span {
    height: 12.6rem;
    padding: 0 4.5rem;
}
.steel-future .contents .flex .item dl dd p.image {
    margin-bottom: 4.0rem;
}
.steel-future .contents .flex .item dl dd p.txt {
    font-size: 2.4rem;
    line-height: 2.083333333333333;
}

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

.steel-global .contents .section-title {
    width: 100%;
    height: 44.0rem;
    min-height: 0;
}
.steel-global .contents .section-title#section-01 {
    background-image: url("/saiyou/image/steel/global/bg-section-01-sp.jpg");
}
.steel-global .contents .section-title#section-02 {
    background-image: url("/saiyou/image/steel/global/bg-section-02-sp.jpg");
}
.steel-global .contents .section-title h2 {
    font-size: 5.0rem;
    top: 12.0rem;
}
.steel-global .contents .section-title h2 span.wrap {
    background: none;
    padding: 0;
}
.steel-global .contents .section-title h2 span.wrap span {
    background: #006ee1;
    display: inline-block;
    padding: 0.5rem 1.0rem;
    margin: 1.0rem 0;
}

.steel-global .contents .inner.article {
    width: 67.0rem;
    padding: 16.0rem 3.0rem 3.0rem;
    margin-top: -8.0rem;
    margin-bottom: 9.0rem;
}
.steel-global .contents .inner.article::before {
    width: 0.4rem;
    height: 13.0rem;
    top: -5.0rem;
}

/* 基本コピー */
.steel-global .contents .inner.article dl.body {
    margin-bottom: 5.0rem;
}
.steel-global .contents .inner.article dl.body dt {
    font-size: 3.4rem;
    padding-left: 3.0rem;
    margin-bottom: 5.0rem;
}
.steel-global .contents .inner.article dl.body dt::before {
    width: 0.6rem;
}
.steel-global .contents .inner.article dl.body dd {
    font-size: 2.4rem;
    line-height: 2.083333333333333;
}
.steel-global .contents .inner.article p.image {
    width: 100%;
}
.steel-global .contents .inner.article p#overseas-office {
    margin: 0 auto 7.0rem;
}
.steel-global .contents .inner.article p#worldmap {
    margin: 0 -3.0rem 15.0rem;
}

/* 本文＆イメージ横並び */
.steel-global .contents .inner.article .body-with-image {
    margin: 0 auto 10.0rem;
    display: block;
}
.steel-future .contents .inner .body-with-image + .body-with-image.reverse {
    margin-top: -13.0rem;
}
.steel-global .contents .inner.article .body-with-image dl.body {
    width: 100%;
    margin-bottom: 5.0rem;
}
.steel-global .contents .inner.article .body-with-image p.image {
    width: 50.0rem;
    margin: 0 auto;
}

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

.steel-attempt .contents .inner.article .attempt {
    width: 100%;
    margin-bottom: 12.0rem;
    display: block;
}
.steel-attempt .contents .inner.article .attempt p.image {
    width: 100%;
}
.steel-attempt .contents .inner.article .attempt .movie {
    width: 100%;
    margin-bottom: 5.0rem;
}
.steel-attempt .contents .inner.article .attempt .movie .iframe {
    text-align: center;
}
.steel-attempt .contents .inner.article .attempt .movie .iframe iframe {
    width: 70.0rem;
    height: 39.6rem;
}
.steel-attempt .contents .inner.article .attempt .movie p.caption {
    font-size: 2.0rem;
    margin: 2.0rem 2.5rem 0;
}
.steel-attempt .contents .inner.article .attempt dl.body {
    background: #fff;
    width: 67.0rem;
    padding: 4.0rem 2.0rem;
    margin: -10.0rem auto 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.steel-attempt .contents .inner.article .attempt .movie + dl.body {
    margin: 0 auto;
}
.steel-attempt .contents .inner.article .attempt dl.body dt {
    font-size: 3.4rem;
    line-height: 1.764705882352941;
    padding-bottom: 4.0rem;
    margin-bottom: 5.0rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dt::before {
    height: 0.6rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd {
    font-size: 2.4rem;
    line-height: 2.083333333333333;
}
.steel-attempt .contents .inner.article .attempt dl.body dd sub {
    font-size: 2.4rem;
    display: inline-block;
    transform: scale(0.6);
    vertical-align: -0.4rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd a {
    font-size: 2.8rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd p.award {
    width: 52.0rem;
    margin: 6.0rem auto 0;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio {
    padding: 6.0rem;
    margin-top: 3.0rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head {
    font-size: 3.0rem;
    margin-bottom: 1.0rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head sup {
    font-size: 2.2rem;
    vertical-align: 0.5rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head em {
    font-size: 4.8rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head em span.num {
    font-size: 11.6rem;
    vertical-align: -0.8rem;
}
.steel-attempt .contents .inner.article .attempt dl.body dd #ratio p.head + p {
    font-size: 2.2rem;
    text-align: left;
}

/* 最先端の取り組みを支える土台 */
.steel-attempt .contents #base {
    padding: 12.0rem 0 34.0rem;
}
.steel-attempt .contents #base .inner {
    width: 67.0rem;
}
.steel-attempt .contents #base .inner h2 {
    font-size: 3.4rem;
    margin-bottom: 4.0rem;
}
.steel-attempt .contents #base .inner p.txt {
    font-size: 2.4rem;
    line-height: 2.083333333333333;
    width: 100%;
    margin: 0 auto 12.0rem;
}
.steel-attempt .contents #base .inner .flex {
    display: block;
    width: 63.0rem;
    margin: 0 auto;
}
.steel-attempt .contents #base .inner .flex .item {
    width: 100%;
    margin-bottom: 11.0rem;
}
.steel-attempt .contents #base .inner .flex .item.full {
    margin-top: 0;
    margin-bottom: 0;
}
.steel-attempt .contents #base .inner .flex .item dl dt {
    font-size: 2.6rem;
    line-height: 1.3125;
    width: 100%;
    padding: 0.2rem;
    margin-bottom: 7.0rem;
}
.steel-attempt .contents #base .inner .flex .item dl dt::before {
    width: 6.0rem;
    height: 6.0rem;
    bottom: -3.0rem;
}
.steel-attempt .contents #base .inner .flex .item dl dt::after {
    width: 0.2rem;
    height: 4.8rem;
    top: calc(100% - 1.2rem);
}
.steel-attempt .contents #base .inner .flex .item dl dt span {
    background: #eceef1;
    height: 12.6rem;
    padding: 0 4.0rem;
}
.steel-attempt .contents #base .inner .flex .item dl dd p.num {
    font-size: 6.4rem;
}
.steel-attempt .contents #base .inner .flex .item dl dd p.num em {
    font-size: 14.0rem;
}
.steel-attempt .contents #base .inner .flex .item dl dd p.num span.figure {
    font-size: 8.4rem;
}
.steel-attempt .contents #base .inner .flex .item dl dd p.one-person {
    font-size: 2.8rem;
}

.steel-attempt .contents #base .inner .flex .item:nth-of-type(1)::before {
    width: 14.0rem;
    height: 12.8rem;
    left: 3.6rem;
    top: -4.0rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(2)::before {
    width: 11.0rem;
    height: 12.6rem;
    right: 3.0rem;
    top: -6.0rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(2) dl dd p.num {
    margin-left: 0;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3)::before {
    width: 19.8rem;
    height: 18.4rem;
    top: 40.0rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dt {
    margin: 0 auto 7.0rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap {
    width: auto;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap p.num {
    font-size: 5.0rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap:nth-of-type(1) p.num {
    margin-right: 0;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap:nth-of-type(2) p.num {
    margin-left: 3.0rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap p.num span.area {
    font-size: 3.6rem;
}
.steel-attempt .contents #base .inner .flex .item:nth-of-type(3) dl dd .wrap p.num em {
    font-size: 10.8rem;
}

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

.steel-each-person .contents .flex {
    display: block;
}
.steel-each-person .contents .flex .item {
    width: 100%;
    border-bottom: 0.4rem solid #fff;
}
.steel-each-person .contents .flex .item:nth-last-of-type(-n+3) {
    border-bottom: 0.4rem solid #fff;
}
.steel-each-person .contents .flex .item:last-of-type {
    border-bottom: none;
}
.steel-each-person .contents .flex .item::after {
    content: none;
}
.steel-each-person .contents .flex .item dl {
    padding: 1.5rem 0;
}
.steel-each-person .contents .flex .item dl dt {
    font-size: 2.6rem;
    width: 23.0rem;
    padding: 0 3.0rem;
}
.steel-each-person .contents .flex .item dl dd {
    font-size: 2.2rem;
    padding: 0 4.0rem;
}
.steel-each-person .contents .flex .item#person-03 dl dd {
    padding: 0 3.0rem;
}
.steel-each-person .contents .flex .item#person-07 dl dd {
    padding: 0 3.0rem;
}
.steel-each-person .contents .flex .item dl dd::before {
    width: 0.2rem;
}

.modaal-container {
    max-width: 61.0rem;
}
.modaal-content-container .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.modaal-content-container .flex .left {
    width: 100%;
}
.modaal-content-container .flex .left dl {
    padding: 2.0rem 0;
}
.modaal-content-container .flex .left dl dt {
    font-size: 2.4rem;
    width: 23.0rem;
    padding: 0 3.0rem;
}
.modaal-content-container .flex .left dl dd {
    font-size: 2.2rem;
    padding: 0 3.0rem;
}
.modaal-content-container .flex .left dl dd::before {
    width: 0.2rem;
}
.modaal-content-container .flex .right {
    width: 100%;
    padding: 7.0rem 5.0rem;
}
.modaal-content-container .flex .right p.catch {
    margin-bottom: 6.0rem;
}
.modaal-content-container .flex.person-03 .right p.catch {
    width: 100%;
}
.modaal-content-container .flex.person-05 .right p.catch {
    width: 100%;
}
.modaal-content-container .flex .right p.txt {
    font-size: 2.4rem;
    line-height: 2.083333333333333;
}
.modaal-content-container .flex .right p.txt sub {
    font-size: 2.4rem;
    display: inline-block;
    transform: scale(0.6);
    vertical-align: -0.4rem;
}
.modaal-content-container p.btn-close {
    font-size: 2.8rem;
    top: -5.0rem;
}
.modaal-content-container p.btn-close img {
    width: 3.2rem;
    vertical-align: -0.5rem;
    margin-left: 2.0rem;
}

}