@charset "UTF-8";

/* ----------------------------------------------
font size
*/
@media screen and (max-width: 767px) {
  .font-base-size {
    font-size: 15px;
  }
}

/* ----------------------------------------------
Contents Header

    <!-- contents-header -------------------- -->
    <div class="contents-header__container width-f contents-header__height-l">

        <div class="contents-header width-l">
            <div class="contents__title-wrapper">
                <h1 class="contents__title title--l">
                    <span class="contents__title-main">ECONA SYSTEM</span>
                    <span class="contents__title-sub">エコーナシステム</span>
                </h1>
            </div>

            <div class="contents-header__copy-wrapper">
                <p class="contents-header__copy">
                    研削材と塗膜を極めて高い精度で分離することを可能にした、従来よりも環境に優しい独自開発のブラスト工法、それがエコーナシステムです。
                </p>
            </div>
        </div>

        <div class="breadcrumbs__wrapper">
            <nav class="breadcrumbs">
                <ol>
                    <li class="breadcrumbs__arrow"><a href="/">ホーム</a></li>
                    <li><span>エコーナシステム</span></li>
                </ol>
            </nav>
        </div>

    </div>
    <!-- /contents-header ------------------- -->

*/

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

div.contents-header__container

*/

.contents-header__container{
    display: flex;
    position: relative;
    /* Contents HEader の背景を暗くする時 */
    background-color: var(--color__white);
}
/* Contents HEader の背景を明るくする時　通常 .background--white を入れる*/
.contents-header__container:not(.background--white){
    background-color: var(--color__navy);
}


/* タイトル部分高さ L or S */ 
.contents-header__height-l{
    min-height: clamp(200px, 33.898vw, 400px);
    padding-top: 75px;
    padding-bottom: 64px;
}
.contents-header__height-s{
    /* 仮 */
    height: clamp(113px, 22.36vw, 280px);
    padding-top: clamp(18px, 5.99vw, 75px);
    padding-bottom: clamp(13px, 5.11vw, 64px);
}

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

.contents-header{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.contents__title-wrapper,
.contents-header__copy-wrapper{
    width: fit-content;
}

/* 大きいタイトル文字 */
.title--l .contents__title-main{
    font-size: clamp(38px, 5.11vw, 64px);
    margin-bottom: 8px;
}
/* 小さいタイトル文字 */
.title--s .contents__title-main{
    font-size: clamp(24px, 2.23vw, 28px);
    margin-bottom: 6px;
}

.contents-header:has( > .contents__title-wrapper){
    min-height: 60px;
}


.contents__title span{
    display: block;
    line-height: 1;
}

/* 背景が暗い色で文字を白くする時 */
.contents-header__container:not(.background--white) .contents__title-main,
.contents-header__container:not(.background--white) .contents__title-sub{
    color: var(--color__white);
}

/* 背景が明るい色の時 */
.contents-header__container.background--white .contents__title-main,
.contents-header__container.background--white .contents__title-sub{
    color: var(--color__navy);
}

.contents__title-main{
    font-weight: 700;
}
.contents__title-sub{
    font-size: 14px;
    font-weight: 600;
}



/* ----------------------------------------------
breadcrumbs
div.breadcrumbs__wrapper
*/

.breadcrumbs__wrapper {
    position: absolute;
    width: fit-content;
    top: clamp(20px, 1.9vw, 24px);
    right: var(--lr-padding);

}
.breadcrumbs__wrapper ol {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.contents-header__container.background--white .breadcrumbs *{
    color: var(--color__black);
}
.contents-header__container:not(.background--white) .breadcrumbs * {
    color: var(--color__white);
}

.breadcrumbs li {
    display: flex;
    align-items: center;
}
.breadcrumbs li a,
.breadcrumbs li span{
    display: block;
    font-size: 13px;
    line-height: 1;
}
.breadcrumbs__arrow {
    margin-right: 34px;
}

.breadcrumbs__arrow::after {
    content: "";
    display: block;
    aspect-ratio: 1;
    position: relative;
    mask-image: url(/assets/images/common/icon_arrow-simple_1a1a1a_12x12.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    width: 10px;
    height: auto;
    right: -15px;
}
.breadcrumbs__arrow::after{
    background-color: var(--color__black);
}
.contents-header__container:not(.background--white) .breadcrumbs__arrow::after{
    background-color: var(--color__white);
}


@media screen and (max-width:767px) {
    .breadcrumbs__wrapper {
        display: none;
    }
}

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


main,
main + .econa-advantage-link__container{
    margin-bottom: clamp(80px, 10vw, 120px);
}

[data-temp="page-econa-system"] .econa-advantage-link ul li:first-child a{
  background-color: var(--color__light-blue);
  pointer-events: none;
}

[data-temp="page-recycle-process"] .econa-advantage-link ul li:nth-child(2) a{
  background-color: var(--color__light-blue);
  pointer-events: none;
}

[data-temp="page-equipment"] .econa-advantage-link ul li:nth-child(3) a{
  background-color: var(--color__light-blue);
  pointer-events: none;
}

[data-temp="page-manage-dx"] .econa-advantage-link ul li:last-child a{
  background-color: var(--color__light-blue);
  pointer-events: none;
}


[data-temp="page-company"] .econa-advantage-link ul li:first-child a{
  background-color: var(--color__light-blue) !important;
  pointer-events: none;
}

[data-temp="page-corporate-philosophy"] .econa-advantage-link ul li:nth-child(2) a{
  background-color: var(--color__light-blue);
  pointer-events: none;
}
[data-temp="page-message"] .econa-advantage-link ul li:nth-child(3) a{
  background-color: var(--color__light-blue);
  pointer-events: none;
}
[data-temp="page-access"] .econa-advantage-link ul li:last-child a{
  background-color: var(--color__light-blue);
  pointer-events: none;
}

/* ----------------------------------------------
foot econa system
*/

.foot-econa-system__container {
    background-color: var(--color__navy);
    color: var(--color__white);
}

main:has( + .foot-econa-system__container){
    margin-bottom: 0;
}

.foot-econa-system__inner {
    display: flex;
    justify-content: space-between;
}

.foot-econa-system__logo {
    position: relative;
    z-index: 1;
}
.foot-econa-system__text{
        display: flex;
        flex-direction: column;
        justify-content: end;
}
.foot-econa-system__text p {
    margin-bottom: 30px;
}

.foot-econa__button {
    display: flex;
    justify-content: space-between;
}

.foot-econa__button li {
    width: calc((100% - 30px) /2 );
}

.foot-econa__button li a {
    line-height: 1;
    width: 100%;
}


.foot-econa-system__inner {
    padding-top: 80px;
    padding-bottom: 94px;
}
.foot-econa-system__logo {
    width: 26%;
    /* width: 264px; */
    margin-right: 30px;
}
.foot-econa-system__text {
    width: 61.35%;
    min-width: 500px;
}

@media screen and (max-width:767px) {

    .foot-econa-system__inner {
        flex-direction: column;        
    }
    .foot-econa-system__logo {
        width: 200px;
    } 
    .foot-econa__button li a {
        font-size: 15px;
        padding: 20px;
        height: 60px;
    }
    .foot-econa-system__inner {
        padding-top: 110px;
        padding-bottom: 76px;
    }
    .foot-econa-system__logo {
        width: 216px;
        margin: 0 auto 60px;
    }
    .foot-econa-system__text {
        max-width: 100%;
        min-width: 100%;
        margin: 0 auto;
    }

    .foot-econa__button {
        flex-direction: column;
    }
    .foot-econa__button li {
        width: 100%;
        margin-bottom: 14px;
    }

}

/* ----------------------------------------------
text link
*/
.text-link__blue__underline {
    color: var(--color__blue);
    text-decoration: underline;
}


/* ----------------------------------------------
pagination
*/

.screen-reader-text {
  word-wrap: normal !important;
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.pagination:first-of-type {
  margin-bottom: clamp(40px, 4.166vw, 50px);
}

.pagination:last-of-type {
  margin-top: clamp(40px, 4.166vw, 50px);
}

.pagination .nav-links {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pagination a {
  text-decoration: none;
}

.pagination a,
.pagination span {
  display: block;
}

.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-align: center;
  line-height: 1;
  color: var(--color__black);
  border: var(--color__black) solid 1px;
  opacity: 0.4;
  border-radius: var(--corner__s);
}

.pagination .prev.page-numbers,
.pagination .next.page-numbers {
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color__ultra-light-gray);
  width: 120px;
  height: 50px;
  border: none;
  opacity: 1;
  padding: 0 16px;
  color: var(--color__dark-gray);
}
.pagination .prev.page-numbers span,
.pagination .next.page-numbers span{
  margin-bottom: -2px;
}

.pagination .next.page-numbers::after,
.pagination .prev.page-numbers::before  {
  position: relative;
  width: 13px;
  aspect-ratio: 1;
  content: "";
  mask-image: url(/assets/images/common/icon_arrow_1a1a1a_26x26.svg);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--color__dark-gray);
}
.pagination .prev.page-numbers::before{
    transform: rotate(180deg);
}
.pagination .page-numbers.current {
  color: var(--color__white);
  border: var(--color__dark-gray) solid 1px;
  background-color: var(--color__dark-gray);
  opacity: 1;
}
.pagination a:hover {
  color: var(--color__white);
  background-color: var(--color__gray);
  border: none;
  opacity: 1;
}

.pagination .prev.page-numbers:hover,
.pagination .next.page-numbers:hover {
  color: var(--color__white);
  background-color: var(--color__gray);
  cursor: pointer;
}
.pagination .next.page-numbers:hover::after,
.pagination .prev.page-numbers:hover::before  {
  background-color: var(--color__white);
}

.pagination a:hover .icon__left-arrow::before,
.pagination a:hover .icon__right-arrow::after {
  background-color: var(--color__white);
}

@media print, screen and (min-width: 768px) {
  .pagination .page-numbers {
    font-size: 18px;
    width: 44px;
    height: 44px;
  }
  .pagination .nav-links {
    gap: 10px;
  }

  .pagination .prev.page-numbers,
  .pagination .next.page-numbers {
    font-size: 15px;
    width: 120px;
    height: 44px;
  }
}

@media screen and (max-width: 767px) {
  .pagination .page-numbers {
    font-size: 15px;
    width: 34px;
    height: 34px;
  }
  .pagination .nav-links {
    gap: 6px;
  }

  .pagination .prev.page-numbers,
  .pagination .next.page-numbers {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }

  .pagination .prev.page-numbers span,
  .pagination .next.page-numbers span {
    display: none;
  }

  .pagination .icon__right-arrow,
  .pagination .icon__left-arrow {
    margin: 0;
  }

}


/* 一覧へ戻るボタン */

.btn__back-list {
  display: block;
  margin-top: 34px;
}
.btn__back-list a {
  margin-left: auto;
}
@media print, screen and (min-width: 768px) {
  .btn__back-list a {
    width: 162px;
  }
}
@media screen and (max-width: 767px) {
  .btn__back-list a {
    width: 130px;
    font-size: 14px;
    padding: 0 14px;
  }
  .btn__back-list .icon__right-arrow::after {
    width: 12px;
  }
}