.element-top {
    position: relative;
    width: 1440rem;
    height: 10620rem;
    background-color: var(--color-bg-01);
    overflow: hidden;
}

.element-top .view {
    position: absolute;
    width: 3299rem;
    height: 7944rem;
    top: 1349rem;
    left: -787rem;
}

.element-top .group {
    position: absolute;
    top: 0;
    left: 0;
    width: 3025rem;
    height: 2796rem;
    display: flex;
    filter: blur(25rem);
}

.element-top .KV {
    margin-top: 290.7rem;
    width: 2537.7rem;
    height: 2215.03rem;
    margin-left: 243.4rem;
    position: relative;
    transform: rotate(15deg);
    opacity: 0.15;
}

.element-top .bg {
    position: absolute;
    top: 391rem;
    left: 574rem;
    width: 1440rem;
    height: 1104rem;
    transform: rotate(165deg);
    background: linear-gradient(78deg, rgba(253, 216, 157, 1) 0%, rgba(252, 204, 193, 1) 100%);
}

.element-top .image {
    position: absolute;
    width: 47.12%;
    height: 69.59%;
    top: 30.41%;
    left: 52.88%;
    transform: rotate(-15deg);
}

.element-top .img {
    position: absolute;
    width: 73.33%;
    height: 44.81%;
    top: 55.19%;
    left: 26.67%;
    transform: rotate(-15deg);
}

.element-top .vector {
    position: absolute;
    width: 78.59%;
    height: 95.54%;
    top: 4.46%;
    left: 21.41%;
    transform: rotate(-15deg);
}

.element-top .vector-2 {
    position: absolute;
    width: 80.63%;
    height: 83.59%;
    top: 16.41%;
    left: 19.37%;
    transform: rotate(-15deg);
}

.element-top .vector-4 {
    position: absolute;
    width: 42.76%;
    height: 86.43%;
    top: 13.57%;
    left: 57.24%;
    transform: rotate(-15deg);
}

.element-top .vector-5 {
    position: absolute;
    width: 80.53%;
    height: 70.98%;
    top: 29.02%;
    left: 19.47%;
    transform: rotate(-15deg);
}

/* 旧 .KV-wrapper / .div-wrapper（ぼかし KV 複製ブロック）は撤去。
   背景は viewport 固定の c-top-bg（components/top-bg.css）が一手に担う。 */

.element-top .vector-6 {
    position: absolute;
    width: 88.26%;
    height: 59.33%;
    top: 40.67%;
    left: 11.74%;
    transform: rotate(-15deg);
}

.element-top .main-contents {
    display: flex;
    flex-direction: column;
    width: 1440rem;
    align-items: center;
    position: absolute;
    top: 2226rem;
    left: 0;
    border-radius: 32rem 32rem 0px 0px;
}

.element-top .works {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
    border-radius: 32rem 32rem 0px 0px;
}

.element-top .frame-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element-top .works-cards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element-top .link-icon {
    display: flex;
    width: 18rem;
    height: 18rem;
    align-items: center;
    justify-content: center;
    gap: 8.33rem;
    position: absolute;
    top: 197rem;
    left: 273rem;
    border-radius: 24rem;
}

.element-top .works-card-item {
    display: flex;
    flex-direction: column;
    width: 306rem;
    align-items: flex-start;
    gap: 16rem;
    position: relative;
    align-self: stretch;
}

.element-top .frame-14 {
    display: flex;
    width: 306rem;
    gap: 16rem;
    align-self: stretch;
    margin-right: -258rem;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.element-top .sub-link-btn {
    display: inline-flex;
    height: 56rem;
    align-items: center;
    justify-content: center;
    gap: 16rem;
    padding: 16rem 20rem 16rem 40rem;
    position: relative;
    flex: 0 0 auto;
    background-color: #ffffff;
    border-radius: 32rem;
    border: 2rem solid;
    border-color: var(--color-key);
}

.element-top .frame-16 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10rem;
    position: relative;
    flex: 0 0 auto;
}

/* .text-wrapper-6 / .link-icon-2（「全ての製品を見る」専用）は c-button 委譲により撤去。 */

.element-top .text-wrapper-11 {
    position: relative;
    align-self: stretch;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 400;
    color: var(--color-neutral-01);
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 28.8rem;
}

.element-top .products {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    align-items: flex-start;
    gap: 32rem;
    padding: 96rem 0px;
    position: relative;
    flex: 0 0 auto;
}

.element-top .text-wrapper-15 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Roboto Condensed", Helvetica;
    font-weight: 700;
    color: var(--color-neutral-01);
    font-size: 56rem;
    letter-spacing: 2.24rem;
    line-height: 84rem;
    white-space: nowrap;
}

.element-top .div-3 {
    display: inline-flex;
    align-items: center;
    gap: 8rem;
    position: relative;
    flex: 0 0 auto;
}

.element-top .frame-41 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element-top .frame-42 {
    display: flex;
    gap: 24rem;
    align-self: stretch;
    width: 100%;
    overflow: hidden;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
}

.element-top .element-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rem;
    padding: 0px 0px 0px 32rem;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.element-top .element {
    margin-bottom: -7524.5rem;
    margin-right: -4107.89rem;
    position: relative;
    width: 180rem;
    height: 180rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element-top .link-icon-3 {
    display: flex;
    width: 16.79rem;
    height: 19.2rem;
    align-items: center;
    justify-content: center;
    gap: 8.33rem;
    position: relative;
    border-radius: 24rem;
}

.element-top .frame-45 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8rem;
    padding: 0px 8rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element-top .frame-46 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element-top .text-wrapper-18 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 600;
    color: var(--color-neutral-01);
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 28.8rem;
}

.element-top .frame-47 {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 4rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element-top .frame-48 {
    align-items: flex-start;
    gap: 10rem;
    flex: 1;
    flex-grow: 1;
    /* 長いカテゴリ名(nowrap)が min-content として行を押し広げ、隣のカードへ
       はみ出すのを防ぐ。min-width:0 で行内の縮小を許可する。 */
    min-width: 0;
    display: flex;
    position: relative;
    align-self: stretch;
}

.element-top .div-wrapper-2 {
    display: inline-flex;
    height: 24rem;
    align-items: center;
    justify-content: center;
    gap: 8rem;
    padding: 2rem 14rem;
    position: relative;
    flex: 0 0 auto;
    /* カードからのはみ出し防止：ピル幅をカード内に収める */
    max-width: 100%;
    min-width: 0;
    background-color: var(--color-secondary);
    border-radius: 12rem;
}

.element-top .text-wrapper-19 {
    font-weight: 700;
    color: #ffffff;
    font-size: 12rem;
    letter-spacing: 0.48rem;
    line-height: 18rem;
    white-space: nowrap;
    /* 長すぎるカテゴリ名は省略記号で切り詰める */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
    position: relative;
    width: fit-content;
    font-family: "Noto Sans JP", Helvetica;
}

.element-top .frame-50 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rem;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.element-top .frame-51 {
    width: 311rem;
    height: 222rem;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    margin-left: -2rem;
    margin-right: -2rem;
    aspect-ratio: 1.4;
    display: flex;
    gap: 8rem;
    padding: 16rem;
    background-color: #ffffff;
    border-radius: 24rem;
}

.element-top .element-a {
    position: relative;
    width: 180rem;
    height: 180rem;
    aspect-ratio: 1;
    object-fit: cover;
}

.element-top .vector-16 {
    position: relative;
    width: 13.33rem;
    height: 13.33rem;
    margin-bottom: -6902.77rem;
    margin-right: -2030.06rem;
}

.element-top .serch-box {
    display: flex;
    flex-direction: column;
    width: 1300rem;
    align-items: center;
    justify-content: center;
    gap: 32rem;
    padding: 48rem;
    position: relative;
    flex: 0 0 auto;
    background-color: #ffffff;
    border-radius: 32rem;
}

.element-top .view-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32rem;
    padding: 60rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: var(--color-bg-02);
    border-radius: 24rem;
}

.element-top .h {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.element-top .h-top {
    display: flex;
    align-items: center;
    gap: 56rem;
    position: relative;
}

.element-top .h-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 8rem;
    position: relative;
    flex: 0 0 auto;
}

/* 見出し下のルール：オレンジ100px(2px) + 灰色(残り1px) を同一ベースラインで並べる */
.element-top .h-rules {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    width: 100%;
}

.element-top .h-rule {
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--color-neutral-04);
}

.element-top .h-rule--accent {
    flex: 0 0 100rem;
    height: 2rem;
    background-color: var(--color-key);
}

.element-top .h-2 {
    position: relative;
    width: fit-content;
    margin-top: -2rem;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 700;
    color: var(--color-neutral-01);
    font-size: 24rem;
    letter-spacing: 0.96rem;
    line-height: 43.2rem;
    white-space: nowrap;
}

.element-top .text-wrapper-21 {
    font-weight: 500;
    color: var(--color-neutral-01);
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: 28.8rem;
    white-space: nowrap;
    position: relative;
    width: fit-content;
    font-family: "Noto Sans JP", Helvetica;
}

.element-top .frame-55 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-radius: 12rem;
}

.element-top .frame-56 {
    display: flex;
    align-items: center;
    gap: 40rem;
    padding: 0px 0px 24rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: var(--color-neutral-04);
}

.element-top .frame-57 {
    display: flex;
    width: 110rem;
    align-items: center;
    gap: 8rem;
    position: relative;
}

.element-top .link-icon-4 {
    position: relative;
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    background: linear-gradient(90deg, rgba(255, 145, 67, 1) 0%, rgba(255, 98, 67, 1) 100%);
}

.element-top .text-wrapper-22 {
    width: fit-content;
    font-size: 18rem;
    letter-spacing: 0;
    line-height: 27rem;
    white-space: nowrap;
    position: relative;
    margin-top: -1px;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 700;
    color: var(--color-neutral-01);
}

.element-top .frame-58 {
    display: flex;
    align-items: flex-start;
    gap: 10rem;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

/* 区分ラジオ / カテゴリーチェックボックスのピル本体は c-field（field.css）に統一。
   旧 .radio-btn / .radio-btn-2 / .checkbox-radio-btn / text-wrapper-23..25 は撤去。 */

.element-top .frame-59 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10rem 10rem;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

/* 長いカテゴリー名がピル幅を押し広げ、検索ボックスからはみ出すのを防ぐ。
   行とチップ領域を縮小可能（min-width:0）にし、ピル内テキストを折り返す。 */
.element-top .frame-56 { min-width: 0; }
.element-top .frame-59 { min-width: 0; }
.element-top .frame-59 .c-field__check {
    max-width: 100%;
    height: auto;
    /* Figma checkbox_list_radio(2943:125625)＝角丸20・高さ約41(py-10)・pl12/pr14。
       旧 50rem/角丸25 は区分ラジオ(角丸20)より背高・丸すぎだった。 */
    min-height: 41rem;
    padding: 10rem 14rem 10rem 12rem;
    border-radius: 20rem;
}
.element-top .frame-59 .c-field__check-text {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.element-top .frame-60 {
    display: flex;
    height: 56rem;
    align-items: flex-start;
    gap: 20rem;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.element-top .white-btn-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20rem;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.element-top .white-btn {
    display: flex;
    height: 56rem;
    align-items: center;
    justify-content: center;
    gap: 14rem;
    padding: 0px 32rem;
    position: relative;
    flex: 1;
    flex-grow: 1;
    background-color: #ffffff;
    border-radius: 28rem;
}

.element-top .frame-61 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rem;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.element-top .text-wrapper-26 {
    position: relative;
    flex: 1;
    width: 100%;
    margin-top: -1px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    font-family: "Noto Sans JP", Helvetica;
    font-weight: 500;
    color: var(--color-neutral-01);
    font-size: 16rem;
    letter-spacing: 0.64rem;
    line-height: normal;
}

.element-top .text-wrapper-26::placeholder {
    color: var(--color-neutral-02);
    font-weight: 500;
    opacity: 1;
}

.element-top .frame-62 {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24rem;
    position: relative;
    flex: 0 0 auto;
}

/* 製品検索フォームのリセット/検索ボタンは共通 c-button（secondary-close / search）へ委譲。
   旧 .reset-icon-btn / .search-icon-btn / .text-wrapper-27 / .text-wrapper-28 / .closereset は撤去。 */

.element-top .search-icon {
    position: relative;
    width: 20rem;
    height: 20rem;
    aspect-ratio: 1;
}

/* 「全ての製品を見る」は共通 c-button（primary-white）へ委譲（旧 .sub-link-btn-2 / .text-wrapper-6 / .link-icon-2 は撤去）。 */

/* ===== ABOUT + ADVANTAGE 背景ラッパー =====
   ※ 旧 main-contents-background-image.svg は撤去。背景は viewport 固定の
   　 c-top-bg（components/top-bg.css）が担い、ここは透過レイアウト枠のみ。 */

.element-top .about-advantage-bg-wrapper {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    position: relative;
    background-color: transparent;
}

/* 旧 ::before 200rem 白帯（products 下端から上に伸ばす段差ぼかし）は撤去。
   背景が全画面 fixed パララックスになり段差自体が消えたため不要。
   ※ serch-box の z-index:2（top-laravel-bridge.css）は残置で問題なし。 */

/* ===== ADVANTAGE セクション（製品の特徴と品質） ===== */

.element-top .advantage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48rem;
    padding: 96rem 70rem;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-radius: 40rem;
}

/* ヘッダー：見出しブロック＋キャッチコピー */

/* カードグリッド */

/* 縦型カード（上部に画像、下部にテキスト） */

/* カードタイトル共通 */

/* 横型カード（左に画像、右にテキスト） */

/* ===== ADVANTAGE セクションここまで ===== */

.element-top .kv {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440rem;
    height: 1070rem;
    overflow: hidden;
}

/* ── KV 背景 ─────────────────────────────── */
/* 旧 .kv .kv-bg / .kv-bg-image / .kv-bg-1 / .kv-bg-vector*〜vector5 / .kv-bg-2 は
   3 重 KV 複製ブロックと一緒に撤去。背景は viewport 固定の c-top-bg が担う。 */

/* ── KV タイトル装飾ドット（top-laravel-bridge.css にない新規要素） */

/* ── KV メイン画像 ───────────────────────── */
.element-top .news {
    display: flex;
    flex-direction: column;
    width: 1440rem;
    align-items: center;
    gap: 80rem;
    padding: 96rem 70rem;
    position: absolute;
    top: 1028rem;
    left: 0;
    background-color: #ffffff;
    border-radius: 32rem;
}

.element-top .news-category-link {
    margin-top: -1px;
    font-weight: 700;
    color: var(--color-neutral-01);
    font-size: 14rem;
    letter-spacing: 0.56rem;
    line-height: 25.2rem;
    white-space: nowrap;
    position: relative;
    width: fit-content;
    font-family: "Noto Sans JP", Helvetica;
}

.element-top .news-category-link.is-active {
    color: var(--color-key);
}

.element-top .news-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 1;
    flex-grow: 1;
}

.element-top .news-list-item {
    align-items: center;
    gap: 24rem;
    padding: 24rem 16rem;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: var(--color-neutral-04);
    display: flex;
    position: relative;
}

.element-top .news .link-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 14rem;
    height: 14rem;
    border-radius: 0px;
}

.element-top .exhibition {
    position: relative;
    width: 62rem;
    height: 58rem;
    aspect-ratio: 1.07;
}