@charset "UTF-8";

/* --------------------------------------------------------------

    一覧ページ

-------------------------------------------------------------- */
.product__tab {
    margin-bottom: 9rem;
}
.tab_area {
    overflow: hidden;
    border-bottom: 4px solid #1f518e;
}

@keyframes tabAnim{
    0%{opacity:0;}
    100%{opacity:1;}
}
input[type="radio"] {
    display: none;
}
.tab_area label {
    display: inline-block;
    padding: 8px 0;
    color: #fff;
    background: #a4acb6;
    text-align: center;
    font-size: 1.6rem;
    cursor: pointer;
    transition: ease 0.2s opacity;
    border-radius: 5px 5px 0 0;
}
.tab_area label:not:last-child {
    margin-right: 10px;
}
  .tab_panel {
    width: 100%;
    opacity: 0;
    padding: 20px 0;
    display: none;
  }

  .panel_area {
    background: #fff;
  }
  

@media screen and (max-width: 600px) {
    .tab_area .content__inner {
        margin-bottom: -1px;
        overflow-x: scroll;
        -ms-overflow-style: none;    /* IE, Edge 対応 */
            scrollbar-width: none;       /* Firefox 対応 */
    }
    .tab_area .content__inner::-webkit-scrollbar {
        display:none;
    }
    .tab_area ul {
        width: 58rem;
        padding-right: 1.5rem;
    }
    .tab_area ul li {
        float: left;
    }
    .tab_area ul li:not(:last-child) {
        margin-right: 10px;
    }
    .tab_area label {
        width: 13rem;
    }
    
}

@media screen and (min-width: 601px) {
    .tab_area ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 -5px;
    }
    .tab_area ul li {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
        padding: 0 5px;
    }
    .tab_area label {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .panel_area {
        margin-bottom: 10px;
    }
}

@media screen and (min-width: 768px) {
    .tab_panel {
        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }
}

@media screen and (min-width: 992px) {
    .tab_area ul {
        margin: 0 -1rem;
    }
    .tab_area ul li {
        padding: 0 1rem;
    }
    .product__tab {
        margin-bottom: 12rem;
    }
    .tab_area label {
        padding: 9px 0;
        font-size: 1.8rem;
        letter-spacing: 0;
    }
}

@media screen and (min-width: 1200px) {
    .tab_area label {
        font-size: 2rem;
        letter-spacing: 1px;
    }
}



/* カテゴリ */

@media screen and (max-width: 767px) {
    .product__cat-sp {
        position: relative;
        background: #fff;
        border: 1px solid #cdcdcd;
    }
    .form__select-arrow-ico {
        position: absolute;
        right: -1px;
        color: #fff;
        background: #000;
        width: 35px;
        height: 105%;
        display: flex;
        justify-content: center;
        align-items: center;
        top: -1px;
        pointer-events: none;
        font-size: 10px;
    }
    .form__select-arrow-ico .icon-arrow {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .product__cat-sp select {
        font-size: 1.5rem;
        width: 100%;
        padding: 10px 20px;
    }
}

@media screen and (min-width: 768px) {
    .product__cat-pc {
        overflow:hidden;
    }
    .product__cat-pc ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: -1rem -5px 4rem;
    }
    .product__cat-pc li {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
        padding: 0 5px;
        margin-top: 1rem;
    }
    .product__cat-pc__inner a {
        border: 1px solid #cdcdcd;
        border-radius: 49px;
        font-size: 14px;
        text-align: center;
        padding: 13px 10px;
        transition: .3s;
        min-height: 50px;
        max-height: 50px;
        position: relative;
    }
    .product__cat-pc__inner a p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
        width: 85%;
    }
}

@media screen and (min-width: 992px) {
    .product__cat-pc ul {
        margin: -1rem -.5rem 4rem;
    }
    .product__cat-pc li {
        -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
        max-width: 20%;
        padding: 0 .5rem;
        margin-top: 1rem;
    }
    .product__cat-pc__inner a:hover {
        border: 1px solid #e9f0f9;
        background: #e9f0f9;
        color: #1f518e;
    }
}
@media screen and (min-width:1300px) {
    .product__cat-pc li {
        -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
        max-width: 20%;
    }
}


/* 投稿リスト */

.product__list__inner--flex__info h3 {
    font-size: 1.6rem;
    color: #003c78;
    margin-bottom: 5px;
}
.product__list__inner--flex__info table th,
.product__list__inner--flex__info table td {
    vertical-align: top;
    font-size: 1.4rem;
}
.product__list__inner--flex__info table th {
    color: #959faa;
    font-size: 1.4rem;
    min-width: 8rem;
    max-width: 8rem;
    width: 30%;
}
.product__list__inner--flex__img {
    overflow: hidden;
    height: 11rem;
    width: 100%;
    position: relative;
}
.product__list__inner--flex__img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: "object-fit: cover;";
    transition: transform 0.3s;
    top: 0;
    left: 0;
}
@media screen and (max-width: 600px) {
    .tab_area {
        overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-bottom: -1px;
    }
    .tab_area::-webkit-scrollbar {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    .product__list__inner {
        padding: 2rem 0;
    }
    .product__list ul li {
        border-bottom: 1px solid #cdcdcd;
    }
    .product__list__inner--flex {
        display: -ms-flexbox;
        display: flex;
    }
    .product__list__inner--flex__img {
        min-width: 11rem;
        max-width: 11rem;
        margin-right: 2rem;
    }
}

@media screen and (min-width:768px) {
    .product__list ul {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .product__list ul li {
        -ms-flex-preferred-size: 33.333333%;
        flex-basis: 33.333333%;
        max-width: 33.333333%;
    }
    .product__list__inner--flex__img {
        height: 13rem;
        margin-bottom: 1.5rem;
    }
    .product__list__inner--flex__info h3 {
        margin-bottom: 1rem;
        font-size: 2rem;
    }
    .product__list__inner--flex__info table th {
        min-width: 9rem;
        max-width: 9rem;
        width: 30%;
    }
}

@media screen and (min-width:992px) {
    
    .product__list__inner--flex__img {
        height: 17rem;
    }
    .product__list ul li a:hover .product__list__inner--flex__img img {
        transform: scale(1.1);
    }
}


/* タブ内ページャー */
#jquery-tab-pager-navi {
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}
#jquery-tab-pager-navi li {
    padding: 0 .5rem;
}
#jquery-tab-pager-navi li a {
    background: #232323;
    color: #fff;
    font-size: 1.4rem;
    padding: 1.1rem 1.7rem;
    border-radius: 5px;
    position: relative;
    transition: .3s;
    font-weight: bold;
}
#jquery-tab-pager-navi li a.current {
    background: #ededed;
    color: #8e989d;
}
#jquery-tab-pager-navi li a.previos,
#jquery-tab-pager-navi li a.next {
    width: 9rem;
}
#jquery-tab-pager-navi li a.previos.disable,
#jquery-tab-pager-navi li a.next.disable {
    display: none;
}
#jquery-tab-pager-navi li a.previos {
    text-align: right;
}
#jquery-tab-pager-navi li a.previos .icon-arrow {
    position: absolute;
    font-size: 1rem;
    transform: scale(0.8) rotate(
180deg
);
    width: 5px;
    height: 8px;
    top: 0;
    bottom: 0;
    left: 1.5rem;
    margin: auto;
}
#jquery-tab-pager-navi li a.next .icon-arrow {
    position: absolute;
    font-size: 1rem;
    transform: scale(0.8);
    width: 5px;
    height: 8px;
    top: 0;
    bottom: 0;
    right: 1.5rem;
    margin: auto;
}

@media screen and (min-width: 992px) {
    #jquery-tab-pager-navi li a:hover {
        background: #2b2a2a;
    }
}




/* --------------------------------------------------------------

    詳細ページ

-------------------------------------------------------------- */
.solveing-ttl {
    font-size: 2.2rem;
    padding: 1rem 0 1rem 2rem;
    position: relative;
    color: #1f518e;
    margin-bottom: 2rem;
    margin-top: 0;
    background-color: inherit;
}
.solveing-ttl:before {
    content: "";
    display: inline-block;
    background-color: #1f518e;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
}

.solveing-voice {
    background: url(../img/solveing/voice-filter.jpg) repeat;
    padding: 2rem 2rem 0;
    margin-bottom: 4rem;
    margin-top: 4rem;
}
.solveing-voice h3 {
    font-size: 2rem;
    color: #1f518e;
    margin-bottom: 1rem;
}

/* 製鉄ページ */
.iron-making-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.iron-making-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 992px) {
    
    .solveing-ttl {
        font-size: 3rem;
        margin-bottom: 3rem;
        padding: 19px 32px;
    }
    .solveing-ttl:before {
        width: 5px;
    }
    .solveing-cattable .tbl01 th {
        min-width: 140px;
        max-width: 140px;
    }
    .solveing-cattable .tbl01 td {
        min-width: 290px;
    }


    .solveing-voice {
        margin-bottom: 6rem;
        padding: 3rem 3rem 1rem;
        margin-top: 6rem;
    }
    .solveing-voice h3 {
        font-size: 2.6rem;
        margin-bottom: 1.5rem;
    }
}


/* --------------------------------------------------------------

    カテゴリ一覧

-------------------------------------------------------------- */
.solveing-intro {
    margin: 0 0 40px;
}
.solveing-intro__content {}
.solveing-intro__secondary {
    margin-top: 20px;
}
.solveing-intro__figure-list {
    max-width: 700px;
    margin: 0 auto;
}
.solveing-intro__image {
    margin: 0 auto;
    text-align: center;
}
.solveing-row {
    display: flex;
    flex-wrap: wrap;
}

.solveing-row.-row-10-sm { margin: -10px 0 0 -10px; }
.solveing-row.-row-20-sm { margin: -20px 0 0 -20px; }
.solveing-row.-row-30-sm { margin: -30px 0 0 -30px; }
.solveing-row.-row-40-sm { margin: -40px 0 0 -40px; }

.solveing-row + .solveing-row { margin-top: 0; }

.solveing-row.-row-center-sm { justify-content: center; }

.solveing-row.-row-10-sm > .solveing-col { padding: 10px 0 0 10px; }
.solveing-row.-row-20-sm > .solveing-col { padding: 20px 0 0 20px; }
.solveing-row.-row-30-sm > .solveing-col { padding: 30px 0 0 30px; }
.solveing-row.-row-40-sm > .solveing-col { padding: 40px 0 0 40px; }

.solveing-col.-col-12-sm { width: 100%; }
.solveing-col.-col-11-sm { width: 91.666%; }
.solveing-col.-col-10-sm { width: 83.333%; }
.solveing-col.-col-9-sm  { width: 75%; }
.solveing-col.-col-8-sm  { width: 66.666%; }
.solveing-col.-col-7-sm  { width: 58.333%; }
.solveing-col.-col-6-sm  { width: 50%; }
.solveing-col.-col-5-sm  { width: 41.666%; }
.solveing-col.-col-4-sm  { width: 33.333%; }
.solveing-col.-col-3-sm  { width: 25%; }
.solveing-col.-col-2-sm  { width: 16.666%; }
.solveing-col.-col-1-sm  { width: 8.333%; }

@media screen and (min-width: 768px) {
    .solveing-row.-row-10-md { margin: -10px 0 0 -10px; }
    .solveing-row.-row-20-md { margin: -20px 0 0 -20px; }
    .solveing-row.-row-30-md { margin: -30px 0 0 -30px; }
    .solveing-row.-row-40-md { margin: -40px 0 0 -40px; }

    .solveing-row.-row-center-md { justify-content: center; }

    .solveing-row.-row-10-md > .solveing-col { padding: 10px 0 0 10px; }
    .solveing-row.-row-20-md > .solveing-col { padding: 20px 0 0 20px; }
    .solveing-row.-row-30-md > .solveing-col { padding: 30px 0 0 30px; }
    .solveing-row.-row-40-md > .solveing-col { padding: 40px 0 0 40px; }

    .solveing-col.-col-12-md { width: 100%; }
    .solveing-col.-col-11-md { width: 91.666%; }
    .solveing-col.-col-10-md { width: 83.333%; }
    .solveing-col.-col-9-md  { width: 75%; }
    .solveing-col.-col-8-md  { width: 66.666%; }
    .solveing-col.-col-7-md  { width: 58.333%; }
    .solveing-col.-col-6-md  { width: 50%; }
    .solveing-col.-col-5-md  { width: 41.666%; }
    .solveing-col.-col-4-md  { width: 33.333%; }
    .solveing-col.-col-3-md  { width: 25%; }
    .solveing-col.-col-2-md  { width: 16.666%; }
    .solveing-col.-col-1-md  { width: 8.333%; }
} /* ----- media END ----- */

@media screen and (min-width: 992px) {
    .solveing-intro {
        margin: 0 0 60px;
    }
    .solveing-intro__secondary {
        margin-top: 40px;
    }

    .solveing-row.-row-10-lg { margin: -10px 0 0 -10px; }
    .solveing-row.-row-20-lg { margin: -20px 0 0 -20px; }
    .solveing-row.-row-30-lg { margin: -30px 0 0 -30px; }
    .solveing-row.-row-40-lg { margin: -40px 0 0 -40px; }

    .solveing-row.-row-center-lg { justify-content: center; }

    .solveing-row.-row-10-lg > .solveing-col { padding: 10px 0 0 10px; }
    .solveing-row.-row-20-lg > .solveing-col { padding: 20px 0 0 20px; }
    .solveing-row.-row-30-lg > .solveing-col { padding: 30px 0 0 30px; }
    .solveing-row.-row-40-lg > .solveing-col { padding: 40px 0 0 40px; }

    .solveing-col.-col-12-lg { width: 100%; }
    .solveing-col.-col-11-lg { width: 91.666%; }
    .solveing-col.-col-10-lg { width: 83.333%; }
    .solveing-col.-col-9-lg  { width: 75%; }
    .solveing-col.-col-8-lg  { width: 66.666%; }
    .solveing-col.-col-7-lg  { width: 58.333%; }
    .solveing-col.-col-6-lg  { width: 50%; }
    .solveing-col.-col-5-lg  { width: 41.666%; }
    .solveing-col.-col-4-lg  { width: 33.333%; }
    .solveing-col.-col-3-lg  { width: 25%; }
    .solveing-col.-col-2-lg  { width: 16.666%; }
    .solveing-col.-col-1-lg  { width: 8.333%; }

} /* ----- media END ----- */