@charset "utf-8"; /* =====================================================================
  メインビジュアル（スライダー形式）
  ===================================================================== */
.c-mv-slider {
    position: relative;
    width: 100%;
    height: 65rem;
    overflow: hidden;
    background: #0F2350;
}

.contents-area.catsec .c-mv-slider {
    height: 15rem;
}

.contents-area.catsec .mv-slide-text {
    width: 35rem;
}

.mv-swiper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.mv-swiper .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.mv-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: 1;
}

.mv-slide-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(135deg, rgba(15, 35, 80, 0.8) 0%, rgba(15, 35, 80, 0.4) 100%); */
}

.mv-slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    max-width: 120rem;
    width: 100%;
    padding: var(--s3);
    /* text-align: center; */
    color: var(--white);
}

.mv-slide-text__logo {
    width: 35%;
    margin: 1rem 0 0;
}

.mv-slide-title {
    font-size: var(--s10);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--s3);
    color: var(--white);
    text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.3);
}

.mv-slide-desc {
    font-size: var(--fs-l);
    line-height: 1.8;
    margin: 0;
    color: var(--white);
    text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* スライダーコントロール */
.mv-swiper .swiper-pagination {
    bottom: var(--s4);
    z-index: 4;
}

.mv-swiper .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    background: var(--white);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.mv-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: #ea0437;
}

.mv-swiper .swiper-button-prev, .mv-swiper .swiper-button-next {
    display: none;
}

/* 幾何学的なアクセント（斜めのライン） */
.c-mv-slider::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(234, 4, 55, 0.1) 100%);
    z-index: 0;
    pointer-events: none;
}

/* 音波アニメーション - レイヤー1（前面） */
.c-mv-slider::after {
    content: "";
    position: absolute;
    bottom: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 45% 48% / 45% 52%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    z-index: 0;
    pointer-events: none;
    animation: waveAnime1 linear 15s infinite;
    opacity: 0.6;
}

@keyframes waveAnime1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 音波アニメーション - レイヤー2（中間） */
.mv-swiper::before {
    content: "";
    position: absolute;
    bottom: -60%;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 48% 45% / 50% 48%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
    z-index: 0;
    pointer-events: none;
    animation: waveAnime2 linear 20s infinite;
    opacity: 0.5;
}

@keyframes waveAnime2 {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* 音波アニメーション - レイヤー3（背面） */
.mv-swiper::after {
    content: "";
    position: absolute;
    bottom: -70%;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 50% 47% / 48% 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
    z-index: 0;
    pointer-events: none;
    animation: waveAnime3 linear 25s infinite;
    opacity: 0.4;
}

@keyframes waveAnime3 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* SP用 */
@media screen and (max-width: 767px) {
    .c-mv-slider {
        height: 45rem;
    }

    .contents-area.catsec .mv-slide-text {
        width: 60vw;
        top: 16vw;
    }

    .contents-area.catsec .c-mv-slider {
        height: 30vw;
    }

    .mv-slide-title {
        font-size: 11VW;
        margin-bottom: var(--s2);
        line-height: 1;
    }

    .mv-slide-desc {
        font-size: var(--fs-s);
    }

    .mv-slide-text {
        padding: 0 var(--s3);
    }
}

/* =====================================================================
  汎用プレースホルダー用スタイル
  ===================================================================== */
.c-sec--detail {
    background: var(--c1);
}

/* detail-request 背景固定＋アクセント */
#detail-request {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgb(39 122 128 / 0.95), rgba(39 122 128 / 0.45)), url(img/mv-rfabsorbers02.png) center center / cover fixed no-repeat;
}

#detail-request > .l-container {
    position: relative;
    z-index: 1;
}

/* 見出しスタイル */
.c-h2 {
    font-size: var(--s8);
    font-weight: 700;
    text-align: center;
    color: #0F2350;
    line-height: 1.2;
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 6rem;
}

.c-h2::before {
    content: "";
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    bottom: 0;
    background: url(img/c-h2-dec.png) no-repeat center center / auto 2rem;
    border: none;
    display: block;
    width: 14.5rem;
    height: 2rem;
}

.c-h2__sub {
    font-size: var(--s6);
    display: block;
}

.c-h3 {
    font-size: var(--fs-l);
    font-weight: bold;
    color: var(--txt);
    text-align: left;
}

.c-h4 {
    font-size: var(--fs-xl);
    font-weight: bold;
    padding: var(--s2) var(--s3);
    background: linear-gradient(135deg, #182b57 0%, #4f5a73 100%);
    color: white;
    margin-block: 0 2rem;
    line-height: 1.3;
    }

/* 見出し内リンク */
.c-hlink {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 0 var(--s5) 0 0;
    background: url("./img/arrow-s.svg") no-repeat center right / auto 0.5em;
    transition: opacity 0.2s ease;
}

.c-hlink:hover {
    text-decoration: none;
    opacity: 0.6;
}

/* テキストユーティリティ */
.c-lead {
    margin-bottom: var(--s3);
    color: var(--txt);
    font-size: var(--fs-md);
    line-height: 1.6;
}

.c-desc {
    margin: auto;
    max-width: 90rem;
    color: var(--txt);
}

/* カードコンポーネント */
.c-card {
    background: var(--white);
    padding: var(--s2);
    box-shadow: var(--sd-1);
}

.c-card.l-stack-sm.l-stack-sm--card img {
 height: 24rem;
    object-fit: cover;
}

.c-card--large {
    padding: var(--s4);
}

.c-sec--detail .c-card--large {
    padding: var(--s8) calc((100% - 110rem) / 2) var(--s8);
    background: #fff;
    border-top: 2px solid #277a80;
}

.c-card--small {
    padding: var(--s2);
}

.c-cardTitle {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 var(--s2);
    color: var(--txt);
}

.c-cardSubtitle {
    font-size: var(--fs-m);
    font-weight: 400;
    margin: 0 0 var(--s3);
    color: var(--sub);
}

.c-cardSubcatch__lead {
    display: block;
    margin-bottom: var(--s2);
}

/* カード説明セクション */
.c-cardDesc {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin: var(--s3) 0;
}

.c-cardDesc__title {
    font-size: var(--fs-l);
    font-weight: 700;
    margin: 0;
    color: #277a80;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.c-cardDesc p {
    margin: 0;
    color: var(--txt);
    line-height: 1.5;
}

/* バッジコンポーネント */
.c-badge {
    text-align: center;
    padding: var(--s2) var(--s3);
    background: url("img/c-badge-bg.png") no-repeat center center / cover, var(--pri);
    color: white;
    font-size: var(--fs-xl);
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 0;
    /* ギャップなしの縦積みのため */
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    position: relative;
}

.c-badge::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 0;
    height: 0;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-top: 1rem solid #030303;
}

.c-badge .c-cardSubcatch__lead {
    display: block;
    margin-bottom: var(--s1);
    line-height: 1.3;
    color: #FF5722;
}

span.c-cardSubcatch__lead {
    font-size: clamp(1.6rem, 1.9vw, 2.4rem);
}

.c-badge .c-cardTitle {
    display: flex;
    margin: 0;
    color: white;
    font-size: var(--fs-xl);
    position: relative;
    flex-direction: column-reverse;
    line-height: 1.1;
}

.c-badge .c-cardTitle::after {
    content: "";
    display: block;
    width: 100%;
    height: 18rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    margin-bottom: var(--s2);
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.c-badge.card-badge-1 .c-cardTitle::after {
    background: url("img/za-nac-00000648.png") no-repeat center center / cover;
    border: none;
}

.c-badge.card-badge-3 .c-cardTitle::after {
    background: url("img/za-nac-00000649.png") no-repeat center center / cover;
    border: none;
}

.c-badge.card-badge-2 .c-cardTitle::after {
    background: url("img/za-nac-00000650.png") no-repeat center center / cover;
    border: none;
}

.c-badge .c-cardSubtitle {
    display: block;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--fs-m);
}

/* テーブルコンポーネント */
.c-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0 0;
}

.c-table th, .c-table td {
    padding: var(--s1) var(--s2);
    text-align: left;
    /* border-bottom: 1px solid var(--ln); */
}

.c-table tr:last-child th, .c-table tr:last-child td {
    border-bottom: none;
}

.c-table th {
    background: var(--c2);
    font-weight: bold;
    color: var(--txt);
    width: 20%;
}

.l-stack-sm--card-title {
    background: #525252;
    padding: 2rem;
    border-radius: 0 0 20px 0;
    position: relative;
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
}

.l-stack-sm--card-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(0 76 81 / 0.9), rgba(39 122 128 / 0.5));
    z-index: 0;
    border-radius: 0 0 20px 0;
    background: linear-gradient(135deg, rgb(39 122 128 / 0.95), rgba(39 122 128 / 0.45)), url(img/mv-rfabsorbers02.png) center center / cover no-repeat;
}

.l-stack-sm--card-title {
    display: block;
    text-decoration: none;
    /* min-height: 34rem; */
    /* min-height: 20rem; */
    height: 100%;
}

.l-stack-sm--card-title .c-h3 {
    font-size: 4rem;
    color: #fff;
    position: relative;
    z-index: 1;
}

.l-stack-sm--card-title::after {
    content: "";
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    /* background: url("img/arrow-wh-right.svg") no-repeat center center / contain; */
    z-index: 2;
}

/* 各会社ごとの背景画像 */
.l-stack-sm--card-title.company-ec {
    /* background-image: url("img/ecanechoicchambers.png"); */
    /* border-radius: 0; */
}

.l-stack-sm--card-title.company-ets {
    /* background-image: url("img/ets-lindgren.png"); */
    background-size: cover;
    background-position: left top;
}

a .l-stack-sm--card-title.company-ets {
    text-decoration: none;
}

.l-stack-sm--card-title.company-tdk {
    /* background-image: url("img/tdkrfsolutions.png"); */
}

/* =============================================================
  簡易訴求カード subgrid 対応
============================================================= */
/* カードラッパー（バッジ + カード）の縦積みレイアウト */
.c-card-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
    /* バッジとカードの間のギャップを除去 */
}

.c-card.l-stack-sm .c-h5 {
    font-size: 2.5rem;
    FONT-WEIGHT: 700;
    margin-block: 0 1rem; color: #277a80;
}

.l-stack-sm .btn-internal, .l-stack-sm .btn-anchor, .l-stack-sm .btn-web, .btn-tel {
    margin: var(--s1) auto;
    position: relative;
}

/* カード自体を縦フレックスにして汎用化（可変要素対応） */
.c-card--grid {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    flex: 1;
    /* 残りの高さを全て使用 */
}

/* 下部ブロック（おすすめする理由） */
.c-cardReason {
    display: grid;
    gap: var(--s1);
    padding: var(--s2);
    background: var(--c3);
}

.c-cardReason__label {
    font-weight: 700;
    color: #0F2350;
}

.c-cardReason__text {
    color: var(--txt);
    line-height: 1.8;
}

/* 下部ブロック（キャッチ + p）2種 */
.c-cardCatch {
    display: grid;
    grid-template-rows: auto 1fr;
    /* キャッチは自動、説明文は残りスペース */
    gap: var(--s-2);
    padding: var(--s2);
}

.c-cardCatch--a {
    background: var(--c0);
}

.c-cardCatch--b {
    background: var(--c1);
}

.c-cardCatch__lead {
    font-weight: 700;
    color: #1a2d58;
    font-size: var(--fs-l);
    margin-block: 2rem 0; background: url("img/icon-tit2.png") no-repeat left center / 1.7rem auto;
    padding: 0 0 0 2rem;
}

.c-cardCatch__desc {
    margin: 0;
    color: var(--txt);
    align-self: start;
    /* 説明文を上端に配置 */
}

/* 下部領域（理由・キャッチ群）を一括ラップし、最下段へ押し下げ */
.c-cardFooter {
    display: grid;
    gap: var(--s2);
    margin-top: auto;
}

/* 理由ラベルを独立したブロックとして配置 */
.c-cardReason__label {
    display: block;
    padding: var(--s2);
    background: var(--c2);
    font-weight: 700;
    color: #0F2350;
    font-size: var(--fs-m);
}

/* カード高さ統一のためのグリッド調整 */
#recommended .l-grid-3 {
    align-items: stretch;
    /* カードラッパーの高さを統一 */
}

/* subgrid 対応: カード要素の行整列 */
@supports (grid-template-rows: subgrid) {
    /* 9行のsubgrid設定（バッジ1行 + カード要素8行） */ #recommended .l-grid-3 {
        grid-template-rows: repeat(6, auto);
    }

    /* カードラッパーとカードをsubgridに設定 */
    #recommended .l-grid-3 > .c-card-wrapper, #recommended .c-card--grid {
        display: grid;
        grid-template-rows: subgrid;
    }

    #recommended .l-grid-3 > .c-card-wrapper {
        grid-row: 1 / span 6;
    }

    #recommended .c-card--grid {
        grid-row: 2 / span 5;
        gap: 0;
    }

    /* 下部要素をフラット化 */
    #recommended .c-cardFooter {
        display: contents;
    }

    /* 行マッピング */
    #recommended .c-card-wrapper > .c-badge {
        grid-row: 1;
    }

    #recommended .c-card-wrapper > .c-card--grid > .c-cardTitle {
        grid-row: 1;
        text-align: center;
        font-size: var(--fs-l);
    }

    #recommended .c-card-wrapper > .c-card--grid > p {
        grid-row: 4;
    }

    #recommended .c-card-wrapper > .c-card--grid > .c-cardReason__label {
        grid-row: 5;
    }

    #recommended .c-card-wrapper > .c-card--grid > .c-cardCatch--a {
        grid-row: 6;
    }

    #recommended .c-card-wrapper > .c-card--grid > .c-cardCatch--b {
        grid-row: 7;
    }

    #recommended .c-card-wrapper > .c-card--grid > .btn-web {
        grid-row: 8;
    }
}

/* c-featureCard コンポーネント*/
.c-featureCard {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--s-2);
    padding: var(--s2);
    background: var(--c1);
}

.c-featureCard__lead {
    font-weight: 700;
    color: var(--txt);
    font-size: var(--fs-m);
}

/* =============================================================
  会社一覧カード subgrid 対応
============================================================= */
/* 会社カードの基本レイアウト */
.c-company-card {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    padding: var(--s3);
    background: var(--white);
    box-shadow: var(--sd-1);
    /* height: 100%; */
}

.c-company-card table {
    font-size: 1.4rem;
    margin-block: 1rem 2rem; }

.c-company-card table th {
    width: 30%;
}

/* 会社一覧グリッドの高さ統一 */
.l-sec:has(.c-company-card) .l-grid-3 {
    align-items: self-start;
}

/* subgrid 対応: 会社カード要素の行整列 */
@supports (grid-template-rows: subgrid) {
    /* 6行のsubgrid設定（h3 + img + p + table(3行)） */ /* .l-sec:has(.c-company-card) .l-grid-3 {
    grid-template-rows: repeat(6, auto);
  } *//* 会社カードをsubgridに設定 */ .c-company-card {
        display: flex;
        /* grid-template-rows: subgrid; */
        /* grid-row: 1 / span 6; */
        /* gap: var(--s2); */
    }

    /* 行マッピング */
    .c-company-card > .c-h3 {
        grid-row: 1;
    }

    .c-company-card > img {
        grid-row: 2;
    }

    .c-company-card > p {
        /* grid-row: 3; */
        margin-block: 1rem 2rem; }

    .c-company-card > .c-table {
        /* grid-row: 4 / span 3; */
    }
}

/* SP用 */
@media screen and (max-width: 767px) {
    #recommended .l-grid-3 {
        display: flex;
        flex-direction: column;
    }

    #recommended .l-grid-3 > .c-card-wrapper, #recommended .c-card--grid {
        display: flex !important;
        flex-direction: column;
        grid-row: none;
    }

    #recommended .c-cardFooter {
        display: grid;
        gap: var(--s2);
        margin-top: auto;
    }

    .c-sec--detail .c-card--large {
        padding: var(--s4) var(--s2);
    }

    /* 会社一覧のSP対応 */
    .l-sec:has(.c-company-card) .l-grid-3 {
        display: flex;
        flex-direction: column;
    }

    .c-company-card {
        display: flex !important;
        flex-direction: column;
        grid-row: none;
    }
}

/* =====================================================================
  ボタンスタイル（デザインコンセプトに合わせた配色）
  ===================================================================== */
.btn-web {
    z-index: 5;
}

.btn-web a {
    background: url("img/arrow-wh-right.svg") no-repeat center right 1em / auto 1em, #ea0437 !important;
}

.btn-web:hover a {
    background: url("img/arrow-wh-right.svg") no-repeat center right 1em / auto 1em, #c0032d !important;
}

.btn-tel {
    display: none;
}

.btn-tel a {
    background: url("img/icon-tel-wh.svg") no-repeat center left 1em / auto 1em, #277a80 !important;
    color: #fff;
    font-size: 4.5vw;
}

.btn-tel:hover a {
    background: url("img/icon-tel.svg") no-repeat center left 1em / auto 1em, #1f5f64 !important;
}

/* EC-SORB® ECP-3 カード内の画像レイアウト */
#ec-sorb-ecp-3 .l-grid-2 > div:first-child {
    text-align: center;
}

#ec-sorb-ecp-3 .l-grid-2 > div:first-child img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    #ec-sorb-ecp-3 .l-grid-2 {
        display: flex;
        flex-direction: column;
    }

    .btn-tel {
        display: block;
    }
}

/* アコーディオン */
.more-content {
    display: none;
    overflow: hidden;
}

.acc-more-btn {
    cursor: pointer;
    text-align: center;
    padding: var(--s3);
    background: var(--c2);
    color: var(--txt);
    font-weight: 700;
    transition: opacity 0.3s ease;
    position: relative;
    width: 50%;
    margin: auto;
}

.acc-more-btn::before {
	content: "";
	width: 2rem;
	height: 0.1rem;
	background: #000;
	position: absolute;
	top: 50%;
	right: 2.9rem;
	transform: translate(0, -50%);
}
.acc-more-btn::after {
	content: "";
	width: 0.1rem;
	height: 2rem;
	background: #000;
	position: absolute;
	top: 50%;
	right: 3.9rem;
	transform: translate(0, -50%);
	transition: transform 0.3s;
}
.acc-more-btn.is-open::after {
	transform: translate(0, -50%) rotate(270deg);
}



.acc-more-btn:hover {
    opacity: 0.7;
}

.acc-more-btn.is-animating {
    pointer-events: none;
    opacity: 0.6;
}

/* 会社一覧アコーディオン内のレイアウト */
.more-content .l-grid-3 {
    display: grid;
    gap: var(--s3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--s3);
}

@media screen and (max-width: 767px) {
    .more-content .l-grid-3 {
        display: flex;
        flex-direction: column;
    }


.acc-more-btn {
    width: 80%;
}







	
}

/* 固定背景画像 */
.l-sec--bg-fixed {
    position: relative;
    background-image: url("img/dummy.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.l-sec--bg-fixed::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(255, 255, 255, 0.9); */
    z-index: 0;
}

.l-sec--bg-fixed > .l-container {
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .l-sec--bg-fixed {
        background-attachment: scroll;
    }
}

/* =====================================================================
  追尾ナビゲーション
  ===================================================================== */
.c-fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 35, 80, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.2);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.c-fixed-nav.is-visible {
    transform: translateY(0);
}

.c-fixed-nav__inner {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: var(--s1) var(--s2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
}

.c-fixed-nav__logo {
    flex-shrink: 0;
}

.c-fixed-nav__logo img {
    max-height: 4rem;
    width: auto;
}

.c-fixed-nav__logo a {
    display: block;
    transition: opacity 0.3s ease;
}

.c-fixed-nav__logo a:hover {
    opacity: 0.7;
}

.c-fixed-nav__menu {
    flex: 1;
    display: flex;
    justify-content: center;
}

.c-fixed-nav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1vw;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.c-fixed-nav__list li {
    margin: 0;
}

.c-fixed-nav__list a {
    display: block;
    padding: var(--s1) var(--s2);
    color: var(--white);
    text-decoration: none;
    font-size: var(--fs-s);
    font-weight: 500;
    transition: opacity 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    line-height: 1;
}

.c-fixed-nav__list a:hover {
    opacity: 0.7;
    color: #ea0437;
}

.c-fixed-nav__list a.active {
    color: #277a80;
    font-weight: 700;
}

.c-fixed-nav__button {
    flex-shrink: 0;
}

.c-fixed-nav__button .btn-web {
    margin: 0;
    /* max-width: 100%; */
    /* width: auto; */
    width: 18rem;
}

.c-fixed-nav__button .btn-web a {
    padding: var(--s1) var(--s3);
    font-size: var(--fs-s);
    line-height: 1;
    width: 18rem;
}

/* SP用 */
@media screen and (max-width: 767px) {
    .c-fixed-nav__inner {
        padding: var(--s1) var(--s2);
        flex-wrap: wrap;
        gap: var(--s2);
    }

    .c-fixed-nav__logo img {
        max-height: 2.5rem;
    }

    .c-fixed-nav__menu {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: none;
    }

    .c-fixed-nav__menu::-webkit-scrollbar {
        display: none;
    }

    .c-fixed-nav__list {
        gap: var(--s2);
        padding: var(--s1) 0;
    }

    .c-fixed-nav__list a {
        font-size: 1.3rem;
        padding: var(--s1);
    }

    .c-fixed-nav__button {
        order: 2;
    }

    .c-fixed-nav__button .btn-web {
        max-width: 10rem;
    }

    .c-fixed-nav__button .btn-web a {
        padding: var(--s1) var(--s2);
        font-size: 1.3rem;
        width: 13rem;
    }

    .c-fixed-nav__inner .gnavi-ctrl {
        order: 2;
        margin-left: var(--s1);
    }
}

/* =====================================================================
  Gnav（グローバルナビゲーション）
  ===================================================================== */
/* ハンバーガーメニューボタンのスタイル調整 */
.c-fixed-nav__inner .gnavi-ctrl {
    flex-shrink: 0;
    margin-left: var(--s2);
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: block !important;
    transition: none !important;
}

.c-fixed-nav__inner .gnavi-btn {
    position: relative !important;
    width: 4.8rem;
    height: 4.8rem;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    top: auto !important;
    right: auto !important;
    z-index: 1;
}

.c-fixed-nav__inner .gnavi-btn.is-active {
    z-index: 1600;
    position: relative;
}

.c-fixed-nav__inner .gnavi-btn span.gnavi-btn__bar {
    width: 2.4rem;
    height: 0.2rem;
    background: var(--white);
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

.c-fixed-nav__inner .gnavi-btn span.gnavi-btn__bar:nth-of-type(1) {
    top: auto;
}

.c-fixed-nav__inner .gnavi-btn span.gnavi-btn__bar:nth-of-type(2) {
    top: auto;
}

.c-fixed-nav__inner .gnavi-btn span.gnavi-btn__bar:nth-of-type(3) {
    top: auto;
}

.c-fixed-nav__inner .gnavi-btn.is-active span.gnavi-btn__bar:nth-of-type(1) {
    transform: translateY(0.7rem) rotate(-45deg) !important;
    background: #182b57;
}

.c-fixed-nav__inner .gnavi-btn.is-active span.gnavi-btn__bar:nth-of-type(2) {
    opacity: 0;
}

.c-fixed-nav__inner .gnavi-btn.is-active span.gnavi-btn__bar:nth-of-type(3) {
    transform: translateY(-0.7rem) rotate(45deg) !important;
    background: #182b57;
}

/* Gnavエリアのスタイル調整 */
.gnavi-area {
    display: block !important;
    width: 100%;
    max-width: 37.5rem;
    height: 100vh;
    padding: var(--s1) var(--s1) var(--s10);
    background: #f5f5f5;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1500;
    transform: translateX(100%);
    transition: transform 0.8s ease, opacity 0.8s ease;
    opacity: 0;
}

.is-gnavi-open .gnavi-area {
    opacity: 1;
    transform: translateX(0);
}

.is-gnavi-open .gnavi-btn-close {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.gnavi-title {
    width: 43%;
    margin: var(--s1) auto var(--s3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-l);
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    color: var(--txt);
}

.gnavi-list {
    border-bottom: 1px solid #ffffff;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gnavi-list__item {
    padding-left: 0;
}

.gnavi-list__item::before {
    display: none;
}

.gnavi-list__link {
    width: 100%;
    margin: 0 auto;
    padding: var(--s2) var(--s4) var(--s2) var(--s2);
    border-top: 1px solid #ffffff;
    display: block;
    font-weight: 700;
    line-height: 2;
    text-decoration: none;
    position: relative;
    color: var(--txt);
    transition: background 0.3s ease;
    font-size: 1.8rem;
    line-height: 1.3;
}

.gnavi-list__link:hover {
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.gnavi-list__link::after {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    background: url("img/arrow-s.svg") no-repeat center/50% auto;
    position: absolute;
    top: 50%;
    right: var(--s1);
    transform: translate(0, -50%) rotate(0);
    transition: transform 0.3s;
}

.gnavi-list__link.gnavi-list__link--toggle.js-toggle-btn.is-open::after {
    transform: translate(0, -50%) rotate(-90deg);
}

.gnavi-list__link.gnavi-list__link--toggle.js-toggle-btn::after {
    transform: translate(0, -50%) rotate(90deg);
}

/* Chrome, Safari, Edge, Opera用 */
.is-gnavi-open .gnavi-area::-webkit-scrollbar {
    display: none;
}

/* Firefox, IE, Edge(旧)用 */
.is-gnavi-open .gnavi-area {
    -ms-overflow-style: none;
    /* IE, Edge 対応 */
    scrollbar-width: none;
    /* Firefox 対応 */
}

.gnavi-btn-close {
    width: 80%;
    margin: var(--s3) auto;
    padding: var(--s1);
    background: #333;
    display: none;
    text-align: center;
    border-radius: 50rem;
}

.gnavi-btn-close__inner {
    padding: 0 0 0 var(--s3);
    display: inline-block;
    color: #fff;
    font-weight: 700;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--fs-s);
    line-height: 1;
}

.gnavi-btn-close__inner::before {
    content: "";
    width: 1em;
    height: 0.2rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%) rotate(45deg);
}

.gnavi-btn-close__inner::after {
    content: "";
    width: 1em;
    height: 0.2rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%) rotate(135deg);
}

/* SP用 */
@media screen and (max-width: 767px) {
    .c-fixed-nav__inner .gnavi-btn {
        width: 4rem;
        height: 4rem;
    }

    .c-fixed-nav__inner .gnavi-btn span.gnavi-btn__bar {
        width: 2rem;
    }

    .gnavi-area {
        max-width: 100%;
    }
}

#major-makers .l-stack-sm h5 {
    font-size: 1.8rem;
    background: #e7e7e7;
    padding: 0.3rem 0.8rem;
    FONT-WEIGHT: 800;
    margin-block: 1rem 1rem; }

/* =====================================================================
  セクション別スタイル
  ===================================================================== */
/* 簡易訴求セクション (#recommended) */
#recommended {
    padding: var(--s10) 0;
    background: #F4F6F9;
    margin-block: 0 0 15rem;
}

#recommended .l-stack-s {
    margin-bottom: var(--s4);
}

#recommended .c-h2 {
    /* margin-bottom: var(--s4); */
}

#recommended .c-card-wrapper {
    margin-bottom: 0;
}

#recommended .c-table th {
    width: 100%;
    text-align: left;
}

#recommended .c-table td {
    width: 100%;
}

#recommended .c-card--grid img {
    width: fit-content;
    height: 25rem;
    /* object-fit: cover; */
    display: block;
    margin: auto;
}

/* 詳細訴求セクション (#detail-request) */
#detail-request {
    padding: var(--s10) 0;
}

#detail-request .c-table {
    margin: 0;
    background: none;
}

#detail-request .c-card--large ul:not([class]) li::before {
    bottom: calc(100% - 1em);
}

#detail-request span.c-cardSubcatch__lead {
    font-size: 3.2rem;
}

#detail-request .c-badge .c-cardTitle {
    font-size: var(--fs-xxl);
}

#detail-request .c-badge--detail .c-cardTitle::after {
    background: url("img/za-nac-00000648.png") no-repeat center center / cover;
    border: none;
    width: 65%;
    margin: 0 auto var(--s2);
}

/* detail-request 2社目・3社目のタイトル装飾差し替え */
#noise-sorb-ns1000htrc .c-badge--detail .c-cardTitle::after {
    background: url("img/za-nac-00000649.png") no-repeat center center / cover;
}

#c-ram-flx .c-badge--detail .c-cardTitle::after {
    background: url("img/za-nac-00000650.png") no-repeat center center / cover;
}

#detail-request .c-h2 {
    /* margin-bottom: var(--s5); */
    color: #fff;
}

#detail-request .c-card--large {
    margin-bottom: var(--s5);
}

#detail-request .c-card--large ul:not([class]) li {
    line-height: 1.2;
    margin-bottom: 12px;
}

#detail-request .c-card--large ul:not([class]) li .midasi {
    FONT-WEIGHT: 700;
    display: block;
}

#detail-request .c-table th {
    width: 20%;
}

#detail-request .c-table td {
    width: 30%;
    background: var(--c0);
}

#detail-request .l-stack-sm--card .c-table th {
    width: 100%;
}

#detail-request .l-stack-sm--card .c-table td {
    width: 100%;
}


#detail-request .icon-head02 {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: var(--s3);
    padding: 0 var(--s2) 0 var(--s8);
    background-color: inherit;
    color: #277a80;
}

#detail-request .icon-head02::before {
    width: 6rem;
    height: 6rem;
    background-size: 6rem auto;
    top: 0;
    left: 0;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    #detail-request .icon-head02 {
        margin-left: 0;
        padding: 0 0 0 var(--s8);
        font-size: 2rem;
        line-height: 1.2;
    }

    #detail-request .icon-head02::before {
        content: "";
        width: 4rem;
        height: 4rem;
        left: 0;
        background-size: 4rem auto;
    }
}













/* 主要メーカーセクション (#major-makers) */
#major-makers {
    padding: var(--s10) 0;
    background: var(--white);
    background: #F4F6F9;
}

#major-makers .c-h2 {
    /* margin-bottom: var(--s5); */
}

#major-makers .c-h4 {
    font-size: var(--fs-xl);
    font-weight: bold;
    padding: var(--s2) var(--s3);
    /* background: linear-gradient(135deg, #182b57 0%, #4f5a73 100%); */
    color: white;
    margin-block: 0 2rem; }

#major-makers .c-card--large {
    margin-bottom: var(--s8);
    border-radius: 0 0 20px 0;
    padding: var(--s5) calc((100% - 110rem) / 2) var(--s8);
    border-top: 2px solid #277a80;
    margin-top: var(--s6);
}

#major-makers .c-card--large .l-stack-s {
    margin-block: 0 2rem;}

/* 会社一覧セクション (#company-list) */
#company-list {
    padding: var(--s10) 0;
    background: var(--c1);
}

#company-list .c-h2 {
    margin-bottom: var(--s5);
}

#company-list .c-company-card {
    /* margin-bottom: var(--s3); */
    border-radius: 0 0 20px 0;
    padding-bottom: 10rem;
    /* align-content: space-around; */
    border-top: 2px solid #277a80;
    position: relative;
}


#company-list .c-company-card .btn-internal {
    max-width: 46rem;
    width: 80%;
    margin: var(--s5) auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}



#company-list .l-stack-s.product-sec .c-h4 {
    font-size: var(--fs-l);
    padding: var(--s2) var(--s1) 0;
    line-height: 1.2;
    background: #fff;
    color: #0F2350;
    border-top: solid 1px #0F2350;
    margin-block: 2rem 1rem; }

#company-list .c-company-card .c-hlink {
    line-height: 1;
    font-size: 3rem;
    /* color: #277a80; */
    display: block;
    display: flex;
    align-items: center;
}

#company-list .c-table th {
    width: 32%;
    padding: var(--s1);
}

#company-list .c-table td {
    width: 70%;
    padding: var(--s1);
}

.l-stack-s.product-sec img {
    margin: 0 auto 1rem;
    min-height: 3rem;
    width: auto;
    height: 15rem;
}

/* 基礎知識1セクション (#knowledge-1) */
#knowledge-1 {
    padding: var(--s10) 0;
    background: var(--white);
}

#knowledge-1 .c-h2 {
    margin-bottom: var(--s5);
}

#knowledge-1 .l-left-img-box {
    margin-bottom: var(--s4);
    display: flex;
    gap: var(--s4);
    align-items: flex-start;
}

#knowledge-1 .l-left-img-box .btn-internal {
    width: 30%;
    float: right;
    margin-top: 2rem;
}

#knowledge-1 .l-left-img-box .btn-internal a {
    padding: var(--s1) var(--s4);
    box-shadow: var(--sd-3);
    background: url(./img/arrow-wh-right.svg) no-repeat center right 0.5em / auto 1em, #277a80;
}

#knowledge-1 .l-left-img {
    flex-shrink: 0;
    width: 30%;
}

#knowledge-1 .l-left-img img {
    width: 100%;
    height: auto;
    border-radius: 0 0 20px 0;
}

#knowledge-1 .l-left-img-box > div:last-child {
    flex: 1;
}

#knowledge-1 .l-left-img-box .c-h3 {
    margin-bottom: var(--s2);
    font-size: 3rem;
}

#knowledge-1 .c-h3 a {
    color: inherit;
    text-decoration: none;
    display: block;
    position: relative;
    padding-right: 2.5rem;
}

#knowledge-1 .c-h3 a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    background: url("img/arrow-s.svg") no-repeat center center / contain;
}

/* 基礎知識2セクション (#knowledge-2) */
#knowledge-2 {
    padding: var(--s10) 0;
    background-image: url("img/knowledge-bg.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#knowledge-2 .l-stack-m {
    gap: 0;
    max-width: 1000px;
}

#knowledge-2 .c-h2 {
    margin-bottom: var(--s4);
    color: var(--white);
}

#knowledge-2 .c-h2 a {
    color: var(--white);
    background: url(./img/arrow-wh-s.svg) no-repeat center right / auto 0.5em;
}

#knowledge-2 .l-stack-m p {
    margin-bottom: var(--s2);
    color: var(--white);
}

#knowledge-2 .btn-internal {
    margin: 5rem auto 0;
}

/* 運営会社情報セクション (#operation-company) */
#operation-company {
    padding: var(--s2) 0;
    background: var(--white);
    text-align: right;
}

#operation-company .btn-link {
    display: inline-block;
}

/* SP用 */
@media screen and (max-width: 767px) {
    #recommended {
        padding: var(--s6) 0;
    }

    #recommended .c-h2 {
        margin-bottom: var(--s3);
        font-size: 7vw;
    }

    #recommended .c-card--grid img {
        height: auto;
    }

    #detail-request {
        padding: var(--s6) 0;
    }

    #detail-request .c-h2 {
        margin-bottom: var(--s4);
        font-size: 7vw;
    }

    /* #detail-request 内のテーブルをSPで縦並びに */
    #detail-request .c-table {
        display: block;
    }

    #detail-request .c-table tbody {
        display: block;
    }

    #detail-request .c-table tr {
        display: block;
        /* margin-bottom: var(--s1); */
        /* border-bottom: 1px solid var(--ln); */
    }

    #detail-request .c-table tr:last-child {
        border-bottom: none;
    }

    #detail-request .c-table th, #detail-request .c-table td {
        display: block;
        width: 100%;
        padding: var(--s1) var(--s2);
        text-align: left;
        border-bottom: none;
    }

    #detail-request .c-table th {
        background: var(--c2);
        font-weight: bold;
        /* margin-bottom: var(--s1); */
    }

    #detail-request .c-table td {
        /* margin-bottom: var(--s2); */
    }

    #detail-request .c-table td:last-child {
        margin-bottom: 0;
    }

    #major-makers {
        padding: var(--s6) 0;
    }

    #major-makers .c-h2 {
        margin-bottom: var(--s4);
        font-size: 7vw;
    }

    #company-list {
        padding: var(--s6) 0;
    }

    #company-list .c-h2 {
        margin-bottom: var(--s4);
        font-size: 7vw;
    }

    #knowledge-1 {
        padding: var(--s6) 0;
    }

    #knowledge-1 .c-h2 {
        margin-bottom: var(--s4);
        font-size: 7vw;
    }

    #knowledge-1 .l-left-img-box {
        flex-direction: column;
        gap: var(--s2);
    }

    #knowledge-1 .l-left-img {
        width: 100%;
    }

    #knowledge-2 {
        padding: var(--s6) 0;
        background-attachment: scroll;
    }

    #knowledge-2 .c-h2 {
        margin-bottom: var(--s3);
        font-size: 7vw;
    }

    #operation-company {
        padding: var(--s5) 0 10rem;
    }

    .header-area-upper {
        text-align: left;
    }

    .header-title {
        margin-left: 9%;
    }

    .mv-slide-text__logo {
        width: 65%;
        margin: 1rem 0 1.6rem;
    }

    .c-h2__sub {
        font-size: 5.5vw;
    }

    span.c-cardSubcatch__lead {
        font-size: 6vw;
    }

    .btn-internal a, .btn-anchor a, .btn-web a {
        font-size: 4.5vw;
    }

    .c-h2 {
        font-size: 5.5vw;
    }

    #detail-request span.c-cardSubcatch__lead {
        font-size: 5vw;
    }

    #detail-request .c-badge .c-cardTitle {
        font-size: var(--fs-xl);
    }

    .c-h4 {
        font-size: 5vw;
        line-height: 1.2;
    }

    .l-stack-sm--card-title {
        min-height: auto;
        border-radius: 0;
        height: 10rem;
        padding: 1rem 2rem 2rem;
    }

    .l-stack-sm--card-title .c-h3 {
        font-size: 5.5vw;
    }

    #major-makers .c-card--large {
        padding: 2rem 1rem 1rem;
        border-radius: 0;
    }

    .l-stack-sm--card-title::before {
        border-radius: 0;
    }

    #major-makers .c-h4 {
        font-size: 4.5vw;
    }

    #major-makers .l-stack-sm h5 {
        font-size: 3.8vw;
    }

    #company-list .c-company-card .c-hlink {
        font-size: 6vw;
    }

    .c-company-card > .c-h3 {
        padding: 1.5rem 0;
    }

    #company-list .l-stack-s.product-sec .c-h4 {
        font-size: 5vw;
    }

    #knowledge-1 .l-left-img-box .c-h3 {
        font-size: 6vw;
    }

    #knowledge-1 .l-left-img-box .btn-internal {
        width: 50%;
    }

    #detail-request .c-badge--detail .c-cardTitle::after {
        width: 100%;
    }

    .c-card.l-stack-sm.l-stack-sm--card img {
        height: auto;
        object-fit: contain;
    }

    .l-stack-s.product-sec img {
        height: auto;
    }
}