@charset "UTF-8";
/* ================================================================
   i-Repo IoT LP
   デザイン：Figma「iRepoIoT_pc_261015」（幅1440px）を基準に再現
   作り：i-reporter.jp/edgeocr/ と同じ静的LP。ブレークポイント 1180 / 1024 / 767px
   --u：PC幅で文字と余白を伸縮させる単位。1240px以上で1px（デザインの数値どおり）、
        それより狭い幅では画面幅に比例して最小0.78pxまで縮む。SP（767px以下）は1px固定
   並び：セクションごとに、PCの指定 → @media（1279 → 1180 → 1024 → 767px の広い順）
   ================================================================ */

/* ----------------  common ---------------- */
a,
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-weight: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
    display: block;
}

*,
:after,
:before {
    box-sizing: border-box;
}

/* 字間：em指定は親で固定値に計算されて子に引き継がれ、大きい文字で字間が足りなくなる。
   --ls（既定0.06em）を受け継がせ、要素ごとに自分の文字サイズで計算し直す */

* {
    letter-spacing: var(--ls, 0.06em);
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

:root {
    --u: clamp(0.78px, calc(100vw / 1240), 1px);
    --orange: #ff9500;
    --orange_light: #ffb855;
    --green: #1ea1aa;
    --blue: #004994;
    --gray: #333;
    --header_h: 88px;
}

html {
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header_h);
}

body {
    background: #fff;
    /* 「」などの約物の連続をChromeが自動で詰めるのを止める（Figmaは詰めない） */
    text-spacing-trim: space-all;
    /* 小さい「ッ」「ャ」などを行頭に置かない（Figmaの改行に合わせる） */
    line-break: strict;
    /* 和文と英数字の間に自動で隙間を入れない（Figmaは入れない） */
    text-autospace: no-autospace;
    color: #000;
    font-size: calc(16 * var(--u));
    font-weight: 400;
    --ls: 0.06em;
    line-height: 1.8;
    overflow-x: hidden;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.6;
}

a[href^='tel:'] {
    cursor: default;
}

br.sp {
    display: none;
}

.nw {
    white-space: nowrap;
}

/* 読み上げ用（画面には出さない） */

.sr_only {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.table_hint {
    display: none;
}

/* 表の中の読み上げ用の文字（.sr_only）が、横スクロール枠の外（ページ全体）を基準にしないようにする */

.table_wrap {
    position: relative;
}

/* 上付き（Figmaの fontVariantPosition: SUPER。基準画像で約0.6倍・約0.35em上に描かれている） */

.sup {
    font-size: 0.6em;
    line-height: 0;
    vertical-align: 0.6em;
}

.txt_en {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
}

.txt_orange {
    color: var(--orange);
}

.txt_green {
    color: var(--green);
}

.txt_blue {
    color: var(--blue);
}

.txt_b {
    font-weight: 700;
}

.txt_m {
    font-weight: 500;
}

.inner {
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
    width: 100%;
}

/* ボタン（資料ダウンロード／接続確認・お問い合わせ） */

.btn_wrap {
    display: flex;
    gap: calc(14 * var(--u));
}

.cta_btn {
    align-items: center;
    border-radius: 100px;
    color: #fff;
    display: flex;
    font-size: calc(18 * var(--u));
    font-weight: 500;
    height: calc(63 * var(--u));
    justify-content: center;
    --ls: 0.06em;
    line-height: 1;
    position: relative;
    width: calc(300 * var(--u));
    white-space: nowrap;
}

.cta_btn::after {
    background: url(../img/icon_caret_white.svg) no-repeat center / contain;
    content: '';
    height: calc(16 * var(--u));
    position: absolute;
    right: calc(18 * var(--u));
    top: 50%;
    transform: translateY(-50%);
    width: calc(16 * var(--u));
}

.cta_btn.is_green {
    background: var(--green);
}

.cta_btn.is_blue {
    background: var(--blue);
}

/* ヘッダー内の小さいボタン（矢印なし） */

.cta_btn.is_s {
    font-size: 12px;
    height: 38px;
    padding: 0 22px;
    max-width: 146px;
}

.cta_btn.is_s::after {
    content: none;
}

@media (max-width: 1180px) {
    br.pc {
        display: none;
    }

    br.sp {
        display: block;
    }

    .table_wrap {
        overflow-x: auto;
        padding-right: 20px;
        padding-bottom: 12px;
    }

    .table_wrap::-webkit-scrollbar {
        height: 6px;
    }

    .table_wrap::-webkit-scrollbar-track {
        background: #f2f2f2;
        border-radius: 4px;
    }

    .table_wrap::-webkit-scrollbar-thumb {
        background: var(--orange);
        border-radius: 4px;
    }

    /* 本文の文字がPC版の縮小で12px台にならないよう、15pxにする */
    body {
        font-size: 15px;
    }

    /* 見出し・質問の最後の行に1〜2文字だけが残らないようにする */
    h1,
    h2,
    h3,
    h4 {
        text-wrap: balance;
    }

    p,
    li {
        text-wrap: pretty;
    }
}

@media (max-width: 767px) {
    :root {
        --u: 1px;
        --header_h: 60px;
    }

    body {
        --ls: 0.04em;
    }

    .btn_wrap {
        align-items: center;
        flex-direction: column;
        gap: 12px;
    }

    .cta_btn {
        font-size: clamp(14px, 4.1vw, 16px);
        height: auto;
        margin: 0 auto;
        max-width: 300px;
        min-height: 56px;
        padding: 0 40px 0 24px;
        width: 100%;
    }

    .btn_wrap li {
        max-width: 320px;
        width: 100%;
    }

    .table_wrap {
        padding-right: 14px;
    }

    .table_hint {
        color: var(--gray);
        display: block;
        font-size: 10px;
        margin-bottom: 8px;
        text-align: center;
    }

    .table_hint::before {
        content: '← ';
    }

    .table_hint::after {
        content: ' →';
    }
}

/* ----------------  header ---------------- */
.header {
    height: var(--header_h);
    left: 0;
    position: fixed;
    top: 0;
    transition:
        background-color 0.3s,
        box-shadow 0.3s;
    width: 100%;
    z-index: 100;
}

/* スクロールしたら白地にする（デザインにない挙動。参照LPのヘッダーに合わせた） */

.header.is_scrolled {
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
}

.header_main {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: 0 40px;
}

.header .logo {
    display: block;
    flex-shrink: 0;
    width: 120px;
}

.header .logo img {
    display: block;
}

.header_nav {
    align-items: center;
    display: flex;
    gap: 24px;
}

.header_menu {
    display: flex;
    gap: 18px;
}

/* 末尾の字間はデザイン（Figma）では幅に含まれないため、margin-rightで打ち消す */

.header_menu a {
    display: block;
    font-size: 12px;
    font-weight: 500;
    --ls: 0.08em;
    line-height: 1.5;
    margin-right: -0.08em;
    white-space: nowrap;
}

.header_btn {
    display: flex;
    gap: 10px;
}

.header_toggle {
    display: none;
}

/* タブレット（768〜1180px）だけヘッダーに直接出すボタン */

.header_main > .header_btn.is_tb {
    display: none;
}

@media (min-width: 768px) and (max-width: 1180px) {
    .header_main > .header_btn.is_tb {
        display: flex;
    }
}

@media (max-width: 1180px) {
    .header_main {
        gap: 12px;
        padding: 0 12px 0 20px;
    }

    .header_main .logo {
        margin-right: auto;
    }

    .header_nav {
        background: #fff;
        border-radius: 0 0 0 30px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        display: block;
        max-height: calc(100dvh - var(--header_h));
        overflow-y: auto;
        padding: 20px 48px 46px;
        opacity: 0;
        position: fixed;
        right: 0;
        top: var(--header_h);
        transition:
            opacity 0.3s,
            visibility 0.3s;
        visibility: hidden;
        width: min(100%, 460px);
    }

    .header.is_open {
        background: #fff;
    }

    .header.is_open .header_nav {
        opacity: 1;
        visibility: visible;
    }

    .header_menu {
        display: block;
    }

    .header_menu li {
        border-bottom: 1px solid #e9e9e9;
    }

    .header_menu a {
        font-size: 15px;
        padding: 16px 4px;
    }

    .header_nav .header_btn {
        display: none;
    }

    .header_toggle {
        display: block;
        flex-shrink: 0;
        height: 44px;
        position: relative;
        width: 44px;
    }

    .header_toggle span {
        background: #000;
        height: 2px;
        left: 11px;
        position: absolute;
        transition:
            transform 0.3s,
            opacity 0.3s;
        width: 22px;
    }

    .header_toggle span:nth-child(1) {
        top: 15px;
    }

    .header_toggle span:nth-child(2) {
        top: 21px;
    }

    .header_toggle span:nth-child(3) {
        top: 27px;
    }

    .header.is_open .header_toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .header.is_open .header_toggle span:nth-child(2) {
        opacity: 0;
    }

    .header.is_open .header_toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

@media (max-width: 767px) {
    /* ヘッダーのボタンを隠し、メニューの中のボタンを出す */
    .header_main {
        padding: 0 8px 0 16px;
    }

    .header .logo {
        width: 90px;
    }

    .header_main > .header_btn {
        display: none;
    }

    .header_nav {
        border-radius: 0;
        height: calc(100dvh - var(--header_h));
        max-height: none;
        padding: 16px 24px 40px;
        width: 100%;
    }

    .header_nav .header_btn {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 28px;
    }

    .header_nav .header_btn li {
        max-width: 320px;
        width: 100%;
    }

    .header_nav .header_btn .cta_btn.is_s {
        font-size: 15px;
        height: 52px;
        max-width: 300px;
        width: 100%;
    }
}

/* ----------------  mv ---------------- */
.mv {
    background: linear-gradient(139.84deg, rgba(255, 247, 226, 0.5) 16.7%, rgba(255, 241, 206, 0.5) 29.89%, rgba(255, 229, 186, 0.5) 52.97%, rgba(255, 217, 211, 0.5) 84.29%);
    overflow: hidden;
}

.mv_inner {
    padding-bottom: calc(100 * var(--u));
    padding-top: calc(156 * var(--u));
    position: relative;
}

.mv_txt {
    padding-left: 1px;
}

.mv_logo {
    width: calc(480 * var(--u));
}

.mv_logo img {
    aspect-ratio: 480 / 192;
    display: block;
    width: 100%;
}

.mv_ttl {
    font-size: calc(42 * var(--u));
    font-weight: 700;
    --ls: 0.08em;
    line-height: 1.5;
    margin-top: calc(54 * var(--u));
    paint-order: stroke fill;
    -webkit-text-stroke: calc(8 * var(--u)) #fff;
}

.mv_lead {
    font-size: calc(20 * var(--u));
    --ls: 0.08em;
    line-height: 1.7;
    margin-top: calc(36 * var(--u));
}

.mv_btn {
    margin-top: calc(60 * var(--u));
    justify-content: center;
}

/* 右側の画像群：幅540pxの箱を基準に、中の位置と文字をcqwで持つ（1cqw = 5.4px） */

.mv_visual {
    aspect-ratio: 683 / 506;
    container-type: inline-size;
    left: calc(10px + (100% - 40px) * 0.4983);
    position: absolute;
    top: calc(136 * var(--u));
    width: calc((100% - 40px) * 0.5692);
}

.mv_main {
    left: 0;
    position: absolute;
    top: calc(50 / 682 * 100cqw);
    filter: drop-shadow(rgb(0 0 0 / 10%) 0.3rem 0.3rem 6px);
    width: 100%;
}

.mv_badge {
    display: flex;
    gap: calc(8 / 682 * 100cqw);
    left: calc(252 / 682 * 100cqw);
    position: absolute;
    top: 0;
}

.mv_badge li {
    align-items: center;
    background: linear-gradient(343.25deg, #ff9500 8.08%, #ffc53f 91.92%);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: calc(13 / 682 * 100cqw);
    font-weight: 500;
    height: calc(116 / 682 * 100cqw);
    justify-content: center;
    --ls: 0.02em;
    line-height: calc(19 / 682 * 100cqw);
    text-align: center;
    width: calc(116 / 682 * 100cqw);
}

/* 1つ目だけ、デザインでは文字の箱が中心より2.5px下にある */

.mv_badge li:first-child span {
    transform: translateY(calc(2.5 / 682 * 100cqw));
}

/* 工場のイラスト（iPadの右へ36px出る）が画面の外に出ないよう、画像群を少し小さくする */
@media (max-width: 1279px) {
    .mv_badge li {
        font-size: max(calc(13 / 682 * 100cqw), 11px);
        line-height: max(calc(19 / 682 * 100cqw), 15px);
    }

    .mv_visual {
        width: calc((100% - 40px) * 0.54);
    }
}

/* メインビジュアルを1列にする（画像群が見出しに重なるのを避ける）。
   ロゴ→見出し→リード→画像→ボタンの順に並べる */
@media (max-width: 1024px) {
    .mv_inner {
        display: flex;
        flex-direction: column;
        padding-bottom: 70px;
        padding-top: calc(var(--header_h) + 16px);
    }

    .mv_txt {
        display: contents;
        text-align: center;
    }

    .mv_logo {
        margin: 0 auto;
        width: 240px;
    }

    .mv_ttl {
        margin-top: 20px;
    }

    .mv_lead {
        margin-top: 20px;
    }

    .mv_visual {
        aspect-ratio: 540 / 422;
        left: auto;
        margin: 20px auto 0;
        max-width: 540px;
        order: 1;
        position: relative;
        top: auto;
        width: 100%;
    }

    .mv_main {
        top: 9.8148cqw;
    }

    .mv_badge {
        justify-content: center;
        left: 0;
        right: 0;
        gap: 6px;
    }

    .mv_btn {
        justify-content: center;
        margin-top: 30px;
        order: 2;
    }
}

@media (max-width: 767px) {
    /* 下の .mv_visual の高さ（cqw）の基準にする */
    .mv_inner {
        container-type: inline-size;
        padding-bottom: 50px;
    }

    .mv_logo {
        width: 180px;
    }

    .mv_ttl {
        font-size: clamp(22px, 6.4vw, 27px);
        --ls: 0.04em;
        -webkit-text-stroke: 6px #fff;
    }

    .mv_lead {
        font-size: clamp(12.5px, 3.8vw, 15px);
        --ls: 0.04em;
        margin-top: 12px;
    }

    .mv_visual {
        aspect-ratio: auto;
        height: auto;
        margin: 14px auto 0;
        padding-top: 56px;
        width: 100%;
    }

    .mv_main {
        position: relative;
        top: auto;
        left: 6px;
    }

    .mv_badge {
        gap: 3px;
    }

    .mv_badge li {
        font-size: 10px;
        height: 82px;
        width: 82px;
    }

    .mv_badge li:first-child span {
        transform: none;
    }
}

/* ----------------  共通の見出し ---------------- */
.sec_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sec_tag {
    border-radius: 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    padding: 2px 18px;
}

.sec_tag.is_r6 {
    border-radius: 6px;
}

.sec_tag.is_green {
    background: #ecf6f6;
    color: var(--green);
}

.sec_tag.is_orange {
    background: #fff7ed;
    color: var(--orange);
}

.sec_tag.is_white {
    background: #fff;
}

.sec_ttl {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 21px;
}

.sec_ttl .l1,
.sec_ttl .l2 {
    display: block;
}

/* 2行目が大きい見出し：Figmaは2行目を3.3px下に置く */

.sec_ttl.is_mix .l2 {
    font-size: 44px;
    margin-bottom: 0.7px;
    margin-top: 3.3px;
}

.sec_ttl.is_36 {
    font-size: 36px;
    margin-top: 19px;
}

.sec_lead {
    line-height: 29px;
    margin-top: 37px;
    text-align: center;
}

.sec_lead b {
    font-weight: 700;
}

/* 注意事項の箱（対応機器・費用） */

.note_box {
    height: 102px;
    margin: 40px auto 0;
    max-width: 1100px;
}

.note_box .ttl {
    font-size: 14px;
    font-weight: 500;
    line-height: 25.2px;
    padding-left: 1px;
}

.note_list {
    font-size: 10px;
    --ls: 0.04em;
    line-height: 15px;
    margin-top: 4.8px;
}

.note_list li {
    padding-left: 15px;
    position: relative;
}

.note_list li::before {
    content: '•';
    left: 4px;
    position: absolute;
}

@media (max-width: 1180px) {
    .sec_ttl {
        font-size: 28px;
    }

    .sec_ttl.is_mix .l2 {
        font-size: 36px;
        margin-top: 0;
    }

    .sec_ttl.is_36 {
        font-size: 30px;
    }

    .sec_lead {
        line-height: 1.8;
    }

    .note_box {
        height: auto;
        max-width: 760px;
        width: auto;
    }
}

@media (max-width: 767px) {
    .sec_tag {
        font-size: 14px;
        line-height: 26px;
        padding: 2px 14px;
    }

    .sec_ttl,
    .sec_ttl.is_36 {
        font-size: 20px;
        margin-top: 14px;
    }

    .sec_ttl.is_mix .l2 {
        font-size: 26px;
    }

    .sec_lead {
        font-size: 14px;
        margin-top: 20px;
        text-align: left;
    }
}

/* ----------------  track ---------------- */
.track {
    overflow: hidden;
    padding: 75px 0 34.4px;
}

.track .inner {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.track_logo {
    width: 310px;
}

.track_logo img {
    display: block;
}

.track_tag {
    background: #fff2e2;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    margin-top: 21px;
    padding: 4px 18px;
}

.track_ttl {
    color: var(--blue);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.6;
    margin-top: 26px;
    text-align: center;
}

.track_ttl .is_a {
    --ls: 0.14em;
}

.track_ttl .is_no {
    font-size: 34px;
    --ls: 0.02em;
}

.track_ttl .is_1 {
    font-size: 38px;
}

.track_ttl .is_s {
    font-size: 22px;
}

.track_award {
    align-items: center;
    display: flex;
    gap: 30px;
    margin-top: 13px;
}

.award_img {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

.award_img li {
    width: 70px;
}

.award_img img {
    display: block;
}

.award_num {
    align-items: center;
    display: flex;
    gap: 12px;
}

.award_num li {
    color: var(--blue);
    height: 69px;
    position: relative;
}

.award_num li.is_share {
    width: 171px;
}

.award_num li.is_company {
    width: 253px;
}

.award_num li.is_user {
    width: 201px;
}

.award_num li::before,
.award_num li::after {
    background: url(../img/award_leaf.webp) no-repeat center / contain;
    content: '';
    height: 65px;
    position: absolute;
    top: 4px;
    width: 36px;
}

.award_num li::before {
    left: 0;
}

.award_num li::after {
    right: 0;
    transform: scaleX(-1);
}

.award_num .label {
    font-size: 15px;
    font-weight: 700;
    left: 0;
    line-height: 27px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

.award_num .num {
    font-size: 42px;
    left: 0;
    --ls: 0.02em;
    line-height: 1;
    position: absolute;
    right: 0;
    text-align: center;
    top: 27.7px;
}

.award_num .is_share .num {
    top: 21.8px;
}

.award_num .num .big {
    font-size: 118%;
}

.award_num .num .unit {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 700;
    --ls: 0.08em;
}

.track_note {
    font-size: 10px;
    --ls: 0.02em;
    line-height: 16px;
    margin-top: 20px;
    text-align: center;
}

.track_logos {
    contain: paint;
    margin-top: 53px;
    overflow: clip;
}

/* 企業ロゴは右から左へ流し続ける（10点×2を並べて継ぎ目なく繰り返す） */

.track_logos_list {
    animation: logo_loop 40s linear infinite;
    display: flex;
    gap: 20px;
    transform: translateX(-38px);
    width: max-content;
}

.track_logos_list li {
    flex-shrink: 0;
    width: 160px;
}

.track_logos_list img {
    display: block;
}

@keyframes logo_loop {
    from {
        transform: translateX(-38px);
    }

    to {
        transform: translateX(-1838px);
    }
}

.track_logos:hover .track_logos_list,
.track_logos:focus-within .track_logos_list {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .track_logos_list {
        animation: none;
    }
}

@media (max-width: 1180px) {
    .track_ttl {
        font-size: 22px;
    }

    .track_ttl .is_no {
        font-size: 28px;
    }

    .track_ttl .is_1 {
        font-size: 32px;
    }

    .track_ttl .is_s {
        font-size: 18px;
    }

    .track_award {
        flex-direction: column;
        gap: 16px;
        margin-top: 20px;
    }

    .award_num {
        flex-wrap: wrap;
        justify-content: center;
    }

    .track_note {
        max-width: 640px;
    }
}

@media (max-width: 767px) {
    .track {
        padding: 48px 0 32px;
    }

    .track_logo {
        width: 220px;
    }

    .track_tag {
        font-size: 12px;
        line-height: 1.6;
        padding: 4px 12px;
        text-align: center;
    }

    .track_ttl {
        font-size: 18px;
        line-height: 1.4;
        margin-top: 16px;
    }

    .track_ttl .is_no {
        font-size: 24px;
    }

    .track_ttl .is_1 {
        font-size: 28px;
    }

    .track_ttl .is_s {
        font-size: 16px;
    }

    .award_img {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    .award_img li {
        width: 56px;
    }

    .award_num {
        gap: 3px;
    }

    .award_num li {
        height: 48px;
    }

    .award_num li.is_share {
        width: 88px;
    }

    .award_num li.is_user {
        width: 106px;
    }

    .award_num li.is_company {
        width: 132px;
    }

    .award_num .num {
        font-size: 18px;
        letter-spacing: 0;
    }

    .award_num .label,
    .award_num .num .unit {
        font-size: 9px;
    }

    .award_num li::before,
    .award_num li::after {
        height: 42px;
        width: 22px;
    }

    .track_note {
        text-align: left;
    }

    .track_logos {
        margin-top: 32px;
    }

    .track_logos_list li {
        width: 120px;
    }

    @keyframes logo_loop {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-1400px);
        }
    }
}

/* ----------------  worries ---------------- */
.worries {
    padding: 67px 0 99px;
}

.worries .sec_lead {
    margin-top: 37px;
}

.worries_voice {
    height: 331px;
    margin-top: 55px;
    position: relative;
}

.voice_item {
    background: #f4f4f4;
    border-radius: 100px;
    height: 84px;
    position: absolute;
}

.voice_item.is_01 {
    left: 101px;
    top: 0;
    width: 764px;
}

.voice_item.is_02 {
    left: 166px;
    top: 96px;
    width: 740px;
}

.voice_item.is_03 {
    left: 101px;
    top: 192px;
    width: 632px;
}

.voice_item .txt {
    font-size: 18px;
    font-weight: 700;
    left: 45.79px;
    line-height: 30.6px;
    position: absolute;
    top: 14.58px;
    white-space: nowrap;
}

.voice_item.is_02 .txt {
    left: 44.35px;
}

.voice_item.is_03 .txt {
    left: 37.88px;
}

.voice_item .who {
    align-items: center;
    color: var(--gray);
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    height: 24.32px;
    line-height: 22px;
    margin-right: -0.06em;
    position: absolute;
    top: 45.16px;
}

.voice_item .who::before {
    background: url(../img/icon_user.svg) no-repeat center / contain;
    content: '';
    flex-shrink: 0;
    height: 22px;
    width: 22px;
}

.voice_item.is_01 .who {
    right: 54.43px;
}

.voice_item.is_02 .who {
    right: 52.72px;
}

.voice_item.is_03 .who {
    right: 45.02px;
}

.worries_person {
    left: 940.15px;
    position: absolute;
    bottom: 0;
    width: 156px;
}

.worries_person img {
    display: block;
}

.worries_band {
    background: #ecf6f6;
    height: 140px;
    position: relative;
    text-align: center;
}

.worries_band::after {
    background: #ecf6f6;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    height: 31.88px;
    left: calc(50% - 30px);
    position: absolute;
    top: 132.12px;
    width: 59px;
}

.worries_band .txt {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.46;
    padding-top: 31px;
}

.worries_band .big {
    display: block;
    font-size: 30px;
    margin-top: 2.7px;
}

.worries_data {
    height: 288px;
    margin: 65px auto 0;
    position: relative;
    width: 1000px;
}

.data_card {
    background: #fff;
    border: 1px solid var(--green);
    border-radius: 24px;
    height: 288px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 412px;
}

.data_card.is_machine {
    left: 0;
}

.data_card.is_human {
    right: 0;
}

.data_card .ttl {
    background: var(--green);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    height: 69px;
    line-height: 37.4px;
    padding-top: 16px;
    position: relative;
}

.data_card .ttl::before {
    background: no-repeat center / contain;
    content: '';
    position: absolute;
}

.data_card.is_machine .ttl {
    padding-left: 131px;
}

.data_card.is_machine .ttl::before {
    background-image: url(../img/icon_laptop.svg);
    height: 36px;
    left: 82px;
    top: 17px;
    width: 36px;
}

.data_card.is_human .ttl {
    padding-left: 143.3px;
}

.data_card.is_human .ttl::before {
    background-image: url(../img/icon_file.svg);
    height: 34px;
    left: 98px;
    top: 18px;
    width: 34px;
}

.data_card .list {
    font-size: 16px;
    font-weight: 500;
    left: 44.29px;
    line-height: 26px;
    position: absolute;
    top: 89px;
}

/* 行の高さを広げないよう、10pxの「●」は line-height: 0 にする */

.data_card .list li::before {
    color: var(--green);
    content: '●　';
    font-size: 10px;
    line-height: 0;
}

.data_card .foot {
    background: #ecf6f6;
    border-radius: 8px;
    color: var(--green);
    font-size: 16px;
    font-weight: 700;
    height: 39px;
    left: 42px;
    line-height: 27px;
    padding-top: 6px;
    position: absolute;
    text-align: center;
    top: 213px;
    width: 326px;
}

.data_center {
    left: 428px;
    position: absolute;
    top: 0;
    width: 144px;
}

.data_center .txt {
    color: #666;
    font-size: 16px;
    font-weight: 700;
    line-height: 27px;
    position: absolute;
    text-align: center;
    top: 45px;
    white-space: nowrap;
    left: 24px;
}

.data_center .img {
    left: 0;
    position: absolute;
    top: 87px;
    width: 144px;
}

.data_center .img img {
    display: block;
}

.worries_txt {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    margin-top: 40px;
    text-align: center;
}

.worries_txt.is_2 {
    margin-top: 26px;
}

.worries_stat {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 26px;
}

.worries_stat li {
    background: #f8f8f8;
    border: 2px solid #dadada;
    border-radius: 20px;
    color: var(--blue);
    height: 137px;
    position: relative;
    width: 480px;
}

.worries_stat .label {
    font-size: 16px;
    font-weight: 700;
    line-height: 29px;
    margin-top: 20px;
    text-align: center;
}

.worries_stat .num {
    align-items: center;
    display: flex;
    font-size: 52px;
    height: 52px;
    justify-content: center;
    --ls: 0.06em;
    line-height: 52px;
    margin-top: 9px;
}

.worries_stat .num::before {
    background: no-repeat center / contain;
    content: '';
    flex-shrink: 0;
    height: 52px;
    margin-right: 13px;
    width: 52px;
}

.worries_stat .is_rate .num::before {
    background-image: url(../img/icon_buildings.svg);
}

.worries_stat .is_loss .num::before {
    background-image: url(../img/icon_coins.svg);
    margin-right: 11px;
}

.worries_stat .is_rate .unit {
    font-size: 60%;
    position: relative;
    top: 4px;
}

.worries_stat .is_loss .unit {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 46%;
    font-weight: 700;
    position: relative;
    top: 6px;
}

.worries_note {
    font-size: 10px;
    --ls: 0.02em;
    line-height: 15px;
    text-align: center;
    margin: 32px auto 0;
}

@media (max-width: 1180px) {
    .worries_voice {
        height: auto;
        margin: 40px auto 0;
        max-width: 720px;
    }

    .voice_list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .voice_item,
    .voice_item.is_01,
    .voice_item.is_02,
    .voice_item.is_03 {
        border-radius: 24px;
        height: auto;
        left: auto;
        padding: 16px 28px 14px;
        position: relative;
        top: auto;
        width: auto;
    }

    .voice_item .txt,
    .voice_item.is_02 .txt,
    .voice_item.is_03 .txt {
        left: auto;
        line-height: 1.7;
        position: static;
        white-space: normal;
    }

    .voice_item .who,
    .voice_item.is_01 .who,
    .voice_item.is_02 .who,
    .voice_item.is_03 .who {
        justify-content: flex-end;
        margin-top: 4px;
        position: static;
    }

    .worries_person {
        margin: 16px auto 0;
        position: static;
        width: 140px;
    }

    .worries_band {
        height: auto;
        padding: 24px 20px 28px;
    }

    .worries_band::after {
        bottom: -24px;
        top: auto;
    }

    .worries_band .txt {
        padding-top: 0;
    }

    .worries_band .big {
        font-size: 26px;
        margin-top: 4px;
    }

    .worries_data {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
        margin-top: 56px;
        max-width: 480px;
        width: auto;
    }

    .data_card,
    .data_card.is_machine,
    .data_card.is_human {
        height: auto;
        left: auto;
        padding-bottom: 24px;
        position: relative;
        right: auto;
        width: auto;
    }

    .data_card.is_machine .ttl,
    .data_card.is_human .ttl {
        height: auto;
        padding: 16px 20px 16px 72px;
    }

    .data_card.is_machine .ttl::before,
    .data_card.is_human .ttl::before {
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
    }

    .data_card .list {
        margin: 20px 0 0;
        padding: 0 28px;
        position: static;
    }

    .data_card .foot {
        height: auto;
        margin: 16px 24px 0;
        padding: 6px 12px;
        position: static;
        width: auto;
    }

    .data_center {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 8px;
        left: auto;
        order: 1;
        position: static;
        width: auto;
    }

    .data_center .txt,
    .data_center .img {
        position: static;
    }

    .data_center .img {
        width: 110px;
    }

    .data_card.is_human {
        order: 2;
    }

    .worries_stat {
        align-items: center;
        flex-direction: column;
        gap: 16px;
        margin-top: 30px;
    }

    .worries_stat li {
        max-width: 480px;
        width: 100%;
    }

    .worries_txt {
        text-wrap: balance;
        margin-top: 50px;
    }

    /* 箇条書きの2行目を、記号の後ろの位置にそろえる */
    .data_card .list li {
        padding-left: 21.2px;
        text-indent: -21.2px;
    }
}

@media (max-width: 767px) {
    .worries .sec_lead {
        font-size: 14px;
        margin-top: 20px;
        text-align: left;
    }

    .worries {
        padding: 30px 0 50px;
    }

    .voice_item,
    .voice_item.is_01,
    .voice_item.is_02,
    .voice_item.is_03 {
        padding: 14px 20px 12px;
    }

    .voice_item .txt {
        font-size: 15px;
    }

    .worries_band .txt {
        font-size: 15px;
    }

    .worries_band .big {
        font-size: 20px;
    }

    .data_card .ttl {
        font-size: 19px;
    }

    .data_card .list {
        font-size: 15px;
        padding: 0 20px;
    }

    .data_card .foot {
        font-size: 14px;
    }

    .worries_txt,
    .worries_txt.is_2 {
        font-size: 14px;
        line-height: 1.8;
        margin-top: 32px;
    }

    .worries_note {
        text-align: left;
    }

    .worries_stat li {
        height: auto;
        padding-bottom: 20px;
    }

    .worries_stat .label {
        font-size: 14px;
        margin-top: 16px;
    }

    .worries_stat .num {
        font-size: 40px;
    }

    .worries_stat .num::before {
        height: 40px;
        width: 40px;
    }
}

/* ----------------  about ---------------- */
.about {
    background: linear-gradient(155.91deg, rgba(255, 247, 226, 0.5) 8.97%, rgba(255, 241, 206, 0.5) 25.22%, rgba(255, 229, 186, 0.5) 53.66%, rgba(255, 217, 211, 0.5) 92.25%);
    padding: 100px 0;
}

.about_logo {
    margin-top: 29px;
    width: 340px;
}

.about_logo img {
    display: block;
}

.sec_ttl.is_about {
    line-height: 1.4;
    margin-top: 29px;
    paint-order: stroke fill;
    -webkit-text-stroke: 8px #fff;
}

.sec_ttl.is_about .l2 {
    font-size: 48px;
    margin-top: 4px;
}

.about_lead {
    font-size: 20px;
    font-weight: 700;
    --ls: 0.08em;
    line-height: 38px;
    margin-top: 40px;
    text-align: center;
}

.about_item {
    height: 273px;
    margin-top: 38px;
    position: relative;
}

.about_card {
    background: #fff;
    border: 1px solid var(--orange);
    border-radius: 24px;
    box-shadow: 0 4px 22px 0 rgba(255, 149, 0, 0.2);
    position: absolute;
    width: calc((100% - 128px) / 2);
}

.about_card.is_01 {
    height: 239px;
    left: 0.25px;
    top: 34px;
}

.about_card.is_02 {
    height: 238px;
    right: 0.25px;
    top: 35px;
}

.about_card .pill {
    align-items: center;
    background: var(--orange);
    border-radius: 100px;
    color: #fff;
    display: flex;
    font-size: 18px;
    font-weight: 500;
    justify-content: center;
    line-height: 30.6px;
    position: absolute;
}

.about_card.is_01 .pill {
    height: 40.21px;
    left: 191.75px;
    top: -20px;
    width: 150px;
}

.about_card.is_02 .pill {
    height: 43.07px;
    left: 184.5px;
    top: -21px;
    width: 164.08px;
}

.about_card .ttl {
    color: var(--orange);
    font-size: 24px;
    font-weight: 700;
    left: 0;
    line-height: 40.8px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 47px;
}

.about_card.is_02 .ttl {
    padding-left: 3.2px;
    top: 45px;
}

.about_card .txt {
    color: var(--gray);
    left: 46px;
    line-height: 27px;
    position: absolute;
    top: 109px;
    width: 445px;
}

.about_card.is_02 .txt {
    left: 44.25px;
    top: 108px;
}

.about_center .fukidashi {
    z-index: 1;
    background: url(../img/fukidashi.svg) no-repeat top center / 200px 84px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    height: 97px;
    left: calc(50% - 100.25px);
    --ls: 0.04em;
    line-height: 29px;
    padding-top: 11px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 200px;
}

.about_center .fukidashi::after {
    background: var(--orange_light);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    height: 15px;
    left: 87.75px;
    position: absolute;
    top: 82px;
    width: 24.25px;
}

.about_center .icon {
    left: calc(50% - 43px);
    position: absolute;
    top: 113px;
    width: 86px;
}

.about_center .icon img {
    display: block;
}

.about_band {
    background: rgba(255, 255, 255, 0.7);
    height: 186px;
    margin-top: 60px;
    position: relative;
    text-align: center;
}

.about_band::after {
    background: rgba(255, 255, 255, 0.7);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    height: 26px;
    left: calc(50% - 27px);
    position: absolute;
    top: 186px;
    width: 52px;
}

.about_band .txt {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    padding-top: 37px;
}

.about_band .big {
    display: block;
    font-size: 30px;
    line-height: 48px;
    margin-top: 3.8px;
}

.about_flow {
    align-items: flex-start;
    display: flex;
    height: 247px;
    margin-top: 63.88px;
}

.flow_box {
    border: 2px solid #dadada;
    border-radius: 24px;
    background: #f4f4f4;
    flex-shrink: 0;
    height: 246px;
    margin-top: 1px;
    position: relative;
    text-align: center;
    width: calc((100% - 88px) / 3);
}

.flow_box.is_iot {
    background: #ffedd6;
    border-color: var(--orange_light);
    height: 247px;
    margin-top: 0;
}

.flow_box .en {
    color: #8e8e8e;
    font-size: 16px;
    font-weight: 700;
    left: 0;
    line-height: 27px;
    position: absolute;
    right: 0;
    top: 24px;
}

.flow_box.is_iot .en {
    color: var(--orange);
    padding-left: 2px;
}

.flow_box .ttl {
    font-size: 22px;
    font-weight: 700;
    left: 0;
    line-height: 37.4px;
    position: absolute;
    right: 0;
    top: 54px;
}

.flow_box .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    left: 38px;
    position: absolute;
    right: 38px;
    top: 118px;
}

.flow_box .tags li,
.flow_box .pill {
    background: #a9a9a9;
    border-radius: 100px;
    color: #fff;
    font-size: 14px;
    height: 28px;
    line-height: 24px;
    padding: 2px 20px;
}

.flow_box .icon {
    left: calc(50% - 24.5px);
    position: absolute;
    top: 106px;
    width: 50px;
}

.flow_box .icon img {
    display: block;
}

.flow_box .pill {
    background: var(--orange);
    left: calc(50% - 71.5px);
    position: absolute;
    top: 180px;
    width: 144px;
}

.flow_arrow {
    background: url(../img/icon_caret_l.svg) no-repeat center / contain;
    flex-shrink: 0;
    height: 44px;
    margin-top: 102px;
    width: 44px;
}

@media (max-width: 1180px) {
    .about_lead {
        font-size: 18px;
        line-height: 1.8;
    }

    .about_item {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: auto;
        margin: 64px auto 0;
        max-width: 560px;
    }

    .about_card,
    .about_card.is_01,
    .about_card.is_02 {
        height: auto;
        left: auto;
        padding: 44px 32px 32px;
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
    }

    .about_card.is_01 .pill,
    .about_card.is_02 .pill {
        left: 50%;
        transform: translateX(-50%);
    }

    .about_card .ttl,
    .about_card.is_02 .ttl {
        padding-left: 0;
        position: static;
    }

    .about_card .txt,
    .about_card.is_02 .txt {
        margin-top: 12px;
        position: static;
        width: auto;
    }

    .about_center {
        align-items: center;
        display: flex;
        flex-direction: column;
        margin: 16px 0 36px;
    }

    .about_center .fukidashi,
    .about_center .icon {
        left: auto;
        position: relative;
        top: auto;
    }

    .about_center .icon {
        margin-top: 8px;
    }

    .about_band {
        height: auto;
        margin-top: 48px;
        padding: 28px 20px 32px;
    }

    .about_band::after {
        bottom: -24px;
        top: auto;
    }

    .about_band .txt {
        line-height: 1.7;
        padding-top: 0;
    }

    .about_band .big {
        font-size: 24px;
        line-height: 1.6;
    }

    .about_flow {
        align-items: center;
        flex-direction: column;
        height: auto;
        margin: 56px auto 0;
        max-width: 420px;
    }

    .flow_box,
    .flow_box.is_iot {
        height: auto;
        margin-top: 0;
        padding: 24px 24px 28px;
        width: 100%;
    }

    .flow_box .en,
    .flow_box .ttl,
    .flow_box .tags,
    .flow_box .icon,
    .flow_box .pill {
        left: auto;
        position: static;
        right: auto;
    }

    .flow_box .tags {
        justify-content: center;
        margin-top: 12px;
    }

    .flow_box .icon {
        margin: 12px auto 0;
    }

    .flow_box .pill {
        margin: 12px auto 0;
    }

    .flow_arrow {
        margin: 8px 0;
        transform: rotate(90deg);
    }
}

@media (max-width: 767px) {
    .sec_ttl.is_about .l2 {
        font-size: 30px;
    }

    .sec_ttl.is_about {
        margin-top: 16px;
        -webkit-text-stroke: 6px #fff;
    }

    .about {
        padding: 56px 0 64px;
    }

    .about_logo {
        margin-top: 20px;
        width: 220px;
    }

    .about_lead {
        font-size: 15px;
        margin-top: 24px;
        text-align: left;
    }

    .about_card,
    .about_card.is_01,
    .about_card.is_02 {
        padding: 40px 20px 24px;
    }

    .about_card .ttl {
        font-size: 19px;
        line-height: 1.6;
    }

    .about_card .txt {
        font-size: 14px;
        line-height: 1.8;
    }

    .about_band .txt {
        font-size: 14px;
        text-align: left;
    }

    .about_band .big {
        font-size: 19px;
        text-align: center;
    }

    .flow_box .ttl {
        font-size: 19px;
    }

    .flow_box .tags li,
    .flow_box .pill {
        font-size: 13px;
        padding: 2px 14px;
    }
}

/* ----------------  comparison ---------------- */
.comparison {
    overflow: hidden;
    padding-top: 100px;
}

.comparison_ttl {
    color: var(--blue);
    font-size: 30px;
    font-weight: 700;
    line-height: 54px;
    text-align: center;
}

.sec_lead.is_comparison {
    margin-top: 39px;
}

/* Figmaの枠には影の設定があるが、塗りがないため描画されない。デザインどおり影を付けない */

.comparison_box {
    margin: 0 auto;
    padding: 58px 53px 61px;
    width: 1100px;
}

.comparison_table {
    border-collapse: separate;
    border-spacing: 2px;
    margin: -2px;
    table-layout: fixed;
    width: calc(100% + 4px);
}

.comparison_table th,
.comparison_table td {
    color: var(--gray);
    font-size: 14px;
    height: 65px;
    --ls: 0.06em;
    line-height: 25px;
    vertical-align: middle;
}

.comparison_table thead th,
.comparison_table thead td {
    color: #fff;
    font-weight: 700;
    height: 57px;
    text-align: center;
}

.comparison_table .c_head {
    width: 318px;
}

.comparison_table .c_general {
    background: #a9a9a9;
    border-radius: 20px 20px 0 0;
    font-size: 16px;
}

.comparison_table .c_irepo {
    background: var(--orange);
    border-radius: 20px 20px 0 0;
    font-size: 20px;
    padding-left: 6px;
}

.comparison_table tbody th {
    background: #ecf3fa;
    font-weight: 700;
    padding-left: 31px;
    text-align: left;
}

.comparison_table tbody th.is_center {
    padding-left: 35px;
    padding-top: 4px;
}

.comparison_table tbody td:nth-child(2) {
    background: #f7f7f7;
    padding-left: 24px;
}

.comparison_table tbody td:nth-child(3) {
    background: #fff2e2;
    color: var(--orange);
    font-size: 16px;
    font-weight: 700;
    padding-left: 27px;
}

.comparison_table tbody tr:first-child th {
    border-radius: 20px 0 0 0;
}

.comparison_table tbody tr:last-child th {
    border-radius: 0 0 0 20px;
}

.comparison_table tbody tr:last-child td:nth-child(3) {
    border-radius: 0 0 20px 0;
}

.comparison_foot {
    height: 277.4px;
    margin-top: -17px;
    position: relative;
}

.comparison_foot .txt {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    padding-top: 10.4px;
    text-align: center;
}

.comparison_foot .is_30 {
    font-size: 30px;
}

.comparison_foot .is_28 {
    font-size: 28px;
}

.comparison_foot .pill {
    background: #f4f4f4;
    border-radius: 6px;
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    left: calc(50% - 258px);
    line-height: 29px;
    padding: 6px 24px;
    position: absolute;
    text-align: center;
    top: 123.4px;
    white-space: nowrap;
    width: 516px;
}

.comparison_foot .img {
    right: 24px;
    position: absolute;
    bottom: 0;
    width: 194px;
}

.comparison_foot .img img {
    display: block;
}

@media (max-width: 1180px) {
    .comparison {
        padding-bottom: 0;
    }

    .comparison_ttl {
        font-size: 26px;
    }

    .comparison_box {
        max-width: 760px;
        padding: 40px 0 0;
        width: auto;
    }

    .comparison_table .c_head {
        width: 30%;
    }

    .comparison_table th,
    .comparison_table td {
        height: auto;
        padding: 14px 12px;
    }

    .comparison_table tbody th,
    .comparison_table tbody th.is_center,
    .comparison_table tbody td:nth-child(2),
    .comparison_table tbody td:nth-child(3) {
        padding: 14px 12px;
    }

    .comparison_table thead th,
    .comparison_table thead td {
        height: 52px;
    }

    .comparison_foot {
        height: auto;
        margin: 40px 0 0;
        text-align: center;
    }

    .comparison_foot .txt {
        font-size: 20px;
        padding-top: 0;
    }

    .comparison_foot .is_30 {
        font-size: 24px;
    }

    .comparison_foot .pill {
        display: inline-block;
        left: auto;
        margin-top: 16px;
        position: static;
        white-space: normal;
        width: auto;
    }

    .comparison_foot .img {
        margin: 16px auto 0;
        position: static;
        width: 160px;
    }
}

@media (max-width: 767px) {
    .sec_lead.is_comparison {
        font-size: 14px;
        margin-top: 20px;
        text-align: left;
    }

    .comparison {
        padding-top: 56px;
    }

    .comparison_ttl {
        font-size: 22px;
        line-height: 1.6;
    }

    .comparison_box {
        padding-top: 28px;
    }

    .comparison_table th,
    .comparison_table td,
    .comparison_table tbody th,
    .comparison_table tbody th.is_center,
    .comparison_table tbody td:nth-child(2),
    .comparison_table tbody td:nth-child(3) {
        font-size: 10px;
        letter-spacing: 0;
        line-height: 1.5;
        padding: 10px 8px;
    }

    .comparison_table tbody td:nth-child(3) {
        font-size: 11px;
    }

    .comparison_table thead th,
    .comparison_table thead td {
        height: 44px;
    }

    .comparison_table .c_general {
        font-size: 12px;
    }

    .comparison_table .c_irepo {
        font-size: 14px;
        padding-left: 0;
    }

    .comparison_table .c_head {
        width: 28%;
    }

    .comparison_table .c_general,
    .comparison_table .c_irepo {
        border-radius: 12px 12px 0 0;
    }

    .comparison_table tbody tr:first-child th {
        border-radius: 12px 0 0 0;
    }

    .comparison_table tbody tr:last-child th {
        border-radius: 0 0 0 12px;
    }

    .comparison_table tbody tr:last-child td:nth-child(3) {
        border-radius: 0 0 12px 0;
    }

    .comparison_foot .txt {
        font-size: 16px;
    }

    .comparison_foot .is_30 {
        font-size: 19px;
    }

    .comparison_foot .is_28 {
        font-size: 16px;
    }

    .comparison_foot .pill {
        font-size: 15px;
        line-height: 1.5;
        padding: 6px 14px;
    }

    .comparison_foot .img {
        width: 140px;
    }
}

/* ----------------  cta ---------------- */
.cta {
    background: var(--orange);
    overflow: hidden;
    padding: 60px 0;
    position: relative;
}

.cta::after {
    background: url(../img/logo_iot_symbol_bg.webp) no-repeat center / contain;
    bottom: -38px;
    opacity: 0.18;
    content: '';
    height: 320px;
    left: calc(50% + 448px);
    position: absolute;
    width: 288px;
}

.cta.is_02::after {
    bottom: -40px;
}

.cta.is_03::after {
    bottom: -36px;
}

.cta_box {
    background: #fff;
    border-radius: 30px;
    margin: 0 auto;
    padding: 42.71px 0 58px;
    position: relative;
    text-align: center;
    width: 1100px;
    z-index: 1;
}

.cta.is_03 .cta_box {
    padding-bottom: 57px;
}

.cta_logo {
    margin: 0 auto;
    width: 246px;
}

.cta_logo img {
    display: block;
}

.cta_ttl {
    font-size: 26px;
    font-weight: 700;
    line-height: 39px;
    margin-top: 26.91px;
}

.cta_txt {
    color: var(--gray);
    line-height: 27px;
    margin-top: 18px;
}

.cta.is_02 .cta_txt {
    margin-top: 22px;
}

.cta_btn_wrap {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

@media (max-width: 1180px) {
    .cta_box {
        max-width: 760px;
        padding: 40px 24px 44px;
        width: auto;
    }

    .cta_ttl {
        font-size: 22px;
        line-height: 1.6;
        margin-top: 20px;
        text-wrap: balance;
    }

    .cta_txt {
        line-height: 1.7;
    }

    .cta_btn_wrap {
        justify-content: center;
        margin-top: 28px;
        padding-left: 0;
    }

    .cta::after {
        left: auto;
        right: -60px;
    }
}

@media (max-width: 767px) {
    .cta {
        padding: 40px 0;
    }

    .cta_box {
        border-radius: 20px;
        padding: 32px 20px 36px;
    }

    .cta_logo {
        width: 180px;
    }

    .cta_ttl {
        font-size: 18px;
    }

    .cta_txt {
        font-size: 14px;
        text-align: left;
    }

    .cta::after {
        height: 180px;
        right: -70px;
        width: 160px;
    }
}

/* ----------------  case ---------------- */
.case {
    padding: 100px 0;
}

.case .sec_lead {
    margin-top: 40px;
}

.case_list {
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin-top: 40px;
}

.case_item {
    height: 670px;
    max-width: 1150px;
    position: relative;
}

.case_item:nth-child(1) {
    height: 700px;
}

.case_item:nth-child(2) {
    height: 670px;
}

.case_item:nth-child(3) {
    height: 670px;
}

.case_num {
    align-items: center;
    background: var(--blue);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 18px;
    height: 120px;
    left: 0;
    --ls: 0.02em;
    line-height: 0.94;
    padding-top: 28px;
    position: absolute;
    top: 1px;
    width: 120px;
}

.case_num .no {
    font-size: 44px;
    margin-top: 2.8px;
}

.case_head {
    align-items: center;
    display: flex;
    gap: 20px;
    left: 152px;
    position: absolute;
    top: -1.5px;
}

.case_ttl {
    font-size: 30px;
    font-weight: 700;
    line-height: 48px;
    white-space: nowrap;
}

.case_tag {
    background: #ecf3fa;
    border-radius: 4px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    padding: 4px 12px;
    white-space: nowrap;
}

.case_desc {
    color: var(--gray);
    left: 152px;
    line-height: 26px;
    position: absolute;
    right: 0;
    top: 61px;
}

.case_flow {
    position: absolute;
    top: 160px;
    width: 578px;
}

.case_item.is_r .case_flow {
    right: 0;
}

.case_item.is_l .case_flow {
    left: 50px;
}

.case_box {
    border-radius: 16px;
    padding: 22px 30px;
}

.case_box.is_before {
    background: #f4f4f4;
}

.case_box.is_after {
    background: #fff2e2;
}

.case_box .label {
    border-radius: 100px;
    color: #fff;
    display: block;
    width: fit-content;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    padding: 0 14px;
    vertical-align: top;
}

.case_box.is_before .label {
    background: var(--blue);
}

.case_box.is_after .label {
    background: var(--orange);
}

.case_box .txt {
    color: var(--gray);
    font-size: 13px;
    --ls: 0.02em;
    line-height: 21px;
    margin-top: 11px;
}

.case_box.is_after .txt {
    color: #000;
    font-weight: 500;
}

.case_box .txt b {
    font-weight: 700;
}

.case_arrow {
    color: var(--orange);
    font-size: 14px;
    font-weight: 500;
    left: 28px;
    line-height: 22px;
    padding: 8px 0 8px 34px;
    position: relative;
}

.case_arrow::before {
    background: url(../img/icon_caret_orange.svg) no-repeat center / contain;
    content: '';
    height: 28px;
    left: 0;
    position: absolute;
    top: 4px;
    transform: rotate(90deg);
    width: 28px;
}

.case_chip {
    align-items: center;
    display: flex;
    gap: 4px;
    margin-top: 21px;
}

.case_chip .chip {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 19px;
    padding: 4px 12px;
    white-space: nowrap;
}

.case_chip .chip.is_main {
    background: #fff2e2;
    border-color: var(--orange);
}

.case_item.is_04 .case_chip .chip {
    background: #f7f7f7;
    border-color: #c7c7c7;
}

.case_item.is_04 .case_chip .chip.is_main {
    background: #fff7ed;
    border-color: var(--orange);
}

.case_chip .plus {
    color: #8d8d8d;
    font-size: 12px;
    font-weight: 900;
    line-height: 19px;
    margin-right: -0.06em;
}

.case_img {
    position: absolute;
    width: 488px;
}

.case_item.is_r .case_img {
    left: 50px;
    top: 158px;
}

.case_item.is_l .case_img {
    right: 0.1px;
    top: 159.12px;
}

.case_item.is_04 .case_img {
    top: 156.12px;
}

.case_img img {
    display: block;
}

.case_point {
    align-items: center;
    background: #fff2e2;
    border: 1px solid var(--orange);
    border-radius: 16px;
    display: flex;
    left: 50px;
    position: absolute;
    right: 0;
    top: 550px;
}

.case_point::before {
    background: var(--orange);
    border-radius: 16px 0 0 16px;
    bottom: -1px;
    content: '';
    left: 0;
    position: absolute;
    top: -1px;
    width: 138px;
}

.case_point .label {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    left: 40px;
    line-height: 29px;
    padding-top: 34px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 59px;
}

.case_point .label::before {
    background: url(../img/icon_bulb.svg) no-repeat center / contain;
    content: '';
    height: 34px;
    left: 12.5px;
    position: absolute;
    top: 0;
    width: 34px;
}

/* デザインでは文字は上下中央ではなく、上から31px（1行の箱）／28px（2行の箱、枠線1pxの内側から） */

.case_point .txt {
    align-self: flex-start;
    color: var(--orange);
    font-size: 20px;
    font-weight: 500;
    --ls: 0.04em;
    line-height: 32px;
    margin: 40px 40px 40px 180px;
}

.case_summary {
    font-size: 22px;
    font-weight: 700;
    line-height: 40px;
    margin-top: 40px;
    text-align: center;
}

@media (max-width: 1180px) {
    .case_list {
        gap: 72px;
        margin: 48px auto 0;
        max-width: 760px;
    }

    .case_item,
    .case_item:nth-child(1),
    .case_item:nth-child(2),
    .case_item:nth-child(3) {
        display: grid;
        gap: 20px 20px;
        grid-template-columns: 96px 1fr;
        height: auto;
    }

    .case_item > * {
        position: static !important;
    }

    .case_num {
        font-size: 15px;
        height: 96px;
        padding-top: 22px;
        width: 96px;
    }

    .case_num .no {
        font-size: 36px;
    }

    .case_head {
        align-items: flex-start;
        align-self: center;
        flex-direction: column;
        gap: 8px;
    }

    .case_ttl {
        font-size: 24px;
        line-height: 1.5;
        white-space: normal;
    }

    .case_desc,
    .case_img,
    .case_flow,
    .case_point {
        grid-column: 1 / -1;
        width: auto;
    }

    .case_img {
        margin: 8px auto;
        max-width: 480px;
        width: 100%;
    }

    .case_box {
        height: auto;
    }

    .case_arrow {
        left: auto;
        margin-left: 20px;
        position: relative;
        top: auto;
    }

    .case_box.is_after {
        margin-top: 0;
    }

    .case_chip {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .case_point,
    .case_item:nth-child(1) .case_point {
        align-items: stretch;
        flex-direction: column;
        height: auto;
        overflow: hidden;
    }

    .case_point::before {
        content: none;
    }

    .case_point .label {
        background: var(--orange);
        left: auto;
        padding: 12px 0 12px 44px;
        position: relative;
        text-align: left;
        top: auto;
        transform: none;
        width: auto;
    }

    .case_point .label::before {
        height: 28px;
        left: 12px;
        top: 12px;
        width: 28px;
    }

    .case_point .txt,
    .case_item:nth-child(1) .case_point .txt {
        font-size: 18px;
        margin: 0;
        padding: 16px 20px 20px;
    }

    .case_summary {
        font-size: 20px;
        line-height: 1.8;
    }

    /* 活用例のチップ：「＋」を後ろのチップにくっつけ、行末に残らないようにする */
    .case_chip .plus {
        display: none;
    }

    .case_chip .chip {
        position: relative;
    }

    .case_chip .chip + .plus + .chip::before {
        color: #8d8d8d;
        content: '＋' / '';
        font-size: 12px;
        font-weight: 900;
        left: -14px;
        position: absolute;
        top: 4px;
    }
}

@media (max-width: 767px) {
    .case .sec_lead {
        font-size: 14px;
        margin-top: 20px;
        text-align: left;
    }

    .case {
        padding: 56px 0 64px;
    }

    .case_list {
        gap: 56px;
        margin-top: 32px;
    }

    .case_item,
    .case_item:nth-child(1),
    .case_item:nth-child(2),
    .case_item:nth-child(3) {
        gap: 16px 14px;
        grid-template-columns: 72px 1fr;
    }

    .case_num {
        font-size: 12px;
        height: 72px;
        padding-top: 16px;
        width: 72px;
    }

    .case_num .no {
        font-size: 28px;
        margin-top: 1px;
    }

    .case_ttl {
        font-size: 20px;
    }

    .case_tag {
        font-size: 12px;
        white-space: normal;
    }

    .case_desc {
        font-size: 14px;
        line-height: 1.8;
    }

    .case_box {
        padding: 18px 18px 20px;
    }

    .case_box .txt {
        line-height: 1.7;
    }

    .case_point .txt,
    .case_item:nth-child(1) .case_point .txt {
        font-size: 16px;
        line-height: 1.7;
        padding: 14px 18px 18px;
    }

    .case_summary {
        font-size: 17px;
    }

    .case_chip .chip {
        font-size: 10px;
        padding: 4px;
    }
}

/* ----------------  mapping ---------------- */
.mapping {
    background: #fff7ed;
    padding: 100px 0;
}

.mapping_pc {
    display: block;
    margin: 50px auto;
    max-width: 793px;
    width: 100%;
}

.mapping_point {
    align-items: center;
    background: #fff;
    border: 1px solid var(--orange);
    border-radius: 16px;
    display: flex;
    position: relative;
    margin: 0 auto;
    max-width: 720px;
}

.mapping_point::before {
    background: var(--orange);
    border-radius: 16px 0 0 16px;
    bottom: -1px;
    content: '';
    left: 0;
    position: absolute;
    top: -1px;
    width: 138px;
}

.mapping_point .label {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    left: 40px;
    line-height: 29px;
    padding-top: 34px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 59px;
}

.mapping_point .label::before {
    background: url(../img/icon_bulb.svg) no-repeat center / contain;
    content: '';
    height: 34px;
    left: 12.5px;
    position: absolute;
    top: 0;
    width: 34px;
}

.mapping_point .txt {
    align-self: flex-start;
    color: var(--orange);
    font-size: 24px;
    font-weight: 500;
    --ls: 0.04em;
    margin: 30px 20px 30px 180px;
}

@media (max-width: 1180px) {
    .mapping_pc {
        max-width: 680px;
    }

    .mapping_point {
        grid-column: 1 / -1;
        align-items: stretch;
        flex-direction: column;
        height: auto;
        overflow: hidden;
        width: auto;
    }

    .mapping_point::before {
        content: none;
    }

    .mapping_point .label {
        background: var(--orange);
        left: auto;
        padding: 12px 0 12px 44px;
        position: relative;
        text-align: left;
        top: auto;
        transform: none;
        width: auto;
    }

    .mapping_point .label::before {
        height: 28px;
        left: 12px;
        top: 12px;
        width: 28px;
    }

    .mapping_point .txt {
        font-size: 20px;
        margin: 0;
        padding: 16px 20px 20px;
    }
}

@media (max-width: 767px) {
    .mapping {
        padding: 56px 0 64px;
    }

    .mapping_pc {
        margin: 30px auto;
    }

    .mapping_point .txt {
        font-size: 16px;
        line-height: 1.7;
        padding: 14px 18px 18px;
    }
}

/* ----------------  device ---------------- */
.device {
    background: #f7f7f7;
    padding: 100px 0;
}

.device .sec_lead {
    margin-top: 40px;
}

.device_count {
    display: flex;
    gap: 13px;
    justify-content: center;
    margin-top: 40px;
}

.device_count li {
    background: #fff2e2;
    border: 3px solid #ffe0b2;
    border-radius: 50%;
    height: 240px;
    position: relative;
    text-align: center;
    width: 240px;
}

.device_count .label {
    font-size: 16px;
    font-weight: 700;
    left: 0;
    line-height: 29px;
    position: absolute;
    right: 0;
    top: 57.17px;
}

.device_count .num {
    color: var(--orange);
    font-family: 'Figtree', sans-serif;
    font-size: 50px;
    font-weight: 800;
    left: 0;
    --ls: 0.02em;
    line-height: 1;
    position: absolute;
    right: 0;
    top: 99.46px;
}

.device_count .num .unit {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 700;
    --ls: 0.06em;
}

.device_count .sub {
    font-size: 12px;
    left: 0;
    --ls: 0.02em;
    line-height: 19px;
    position: absolute;
    right: 0;
    top: 159.26px;
}

.device_count .sub a {
    text-decoration: underline;
}

.device_count .is_total .label {
    top: 52.12px;
}

.device_count .is_total .num {
    font-size: 48px;
    top: 89.76px;
}

.device_count .is_total .num .ls {
    --ls: 0.1em;
}

.device_count .is_total .sub {
    top: 145.63px;
}

.device_note {
    font-size: 10px;
    height: 60px;
    --ls: 0.02em;
    line-height: 15px;
    margin-top: 27px;
    text-align: center;
}

.device_maker {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 40px auto 0;
    width: 1100px;
}

.maker_box {
    align-items: center;
    background: #fff;
    border-radius: 20px;
    display: flex;
    gap: 30px;
    height: 154px;
    padding: 0 50px;
}

.maker_box .ttl {
    color: var(--orange);
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 29px;
    padding-left: 36px;
    position: relative;
    width: 349px;
}

.maker_box .ttl::before {
    background: no-repeat center / contain;
    content: '';
    position: absolute;
}

.maker_box.is_plc .ttl::before {
    background-image: url(../img/icon_cpu.svg);
    height: 24.46px;
    left: 0;
    top: 2.77px;
    width: 24.46px;
}

.maker_box.is_sensor .ttl::before {
    background-image: url(../img/icon_ruler.svg);
    height: 25.3px;
    left: 0;
    top: 0.5px;
    width: 25.3px;
}

.maker_box .txt {
    color: var(--gray);
    font-weight: 500;
    line-height: 26px;
    width: 625px;
}

.maker_box .txt b {
    font-weight: 700;
}

.maker_box .txt .r {
    font-weight: 400;
}

.device_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 60px auto 0;
    width: 1100px;
}

.list_ttl button {
    align-items: center;
    background: var(--orange);
    border-radius: 20px;
    color: #fff;
    display: flex;
    height: 100px;
    padding: 0 0 0 39.92px;
    position: relative;
    text-align: left;
    width: 100%;
}

.list_box.is_open .list_ttl button {
    border-radius: 20px 20px 0 0;
}

.list_ttl .icon {
    background: #fff url(../img/icon_cpu.svg) no-repeat center / 25.3px;
    border-radius: 50%;
    flex-shrink: 0;
    height: 42.16px;
    width: 42.16px;
}

.list_box.is_sensor .list_ttl .icon {
    background-image: url(../img/icon_ruler.svg);
}

.list_ttl .txt {
    font-size: 24px;
    font-weight: 500;
    line-height: 38.4px;
    margin-left: 21.92px;
}

.list_ttl .count {
    font-size: 18px;
    font-weight: 500;
}

.list_ttl button::after {
    background: url(../img/icon_caret_acc.svg) no-repeat center / contain;
    content: '';
    height: 18.72px;
    position: absolute;
    right: 38.69px;
    top: 40.64px;
    transform: rotate(90deg);
    transition: transform 0.3s;
    width: 18.72px;
}

.list_box.is_open .list_ttl button::after {
    transform: rotate(-90deg);
}

.list_body {
    background: #fff;
    border: 2px solid var(--orange);
    border-radius: 0 0 20px 20px;
    margin-top: -1px;
    padding: 38px 38px 45px;
}

.device_table {
    border-collapse: collapse;
    table-layout: fixed;
}

.device_table th,
.device_table td {
    color: var(--gray);
    font-size: 14px;
    height: 49px;
    --ls: 0.02em;
    line-height: 22px;
    vertical-align: middle;
}

.device_table tr {
    border-bottom: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
}

.device_table thead th {
    text-align: left;
    background: #f7f7f7;
    font-weight: 700;
    --ls: 0.06em;
}

.device_table th:not(:last-child),
.device_table td:not(:last-child) {
    border-right: 1px solid #e9e9e9;
}

.device_table .t_maker {
    font-weight: 700;
    padding: 10px;
    width: 18%;
}

.device_table th.t_maker {
    padding: 10px;
}

.device_table .t_name {
    padding: 10px;
    width: 24%;
}

.device_table .t_target {
    font-weight: 500;
    padding: 10px;
    width: 40%;
}

.device_table th.t_name,
.device_table th.t_target {
    font-weight: 700;
}

.device_table .t_mark,
.device_table thead .t_mark {
    text-align: center;
    width: 60px;
}

.device_table td.t_mark {
    color: var(--green);
    font-weight: 700;
    padding-left: 24px;
    text-align: left;
}

/* デザインでは記号は左揃え（Pro.は列の左から24px、Std.は22px） */

.device_table td.t_mark + td.t_mark {
    padding-left: 22px;
}

.device_table td.t_mark.is_none {
    color: #a7a7a7;
    font-weight: 400;
}

/* 注記付きの「○*1」：Figmaは基本色 #cf7f08 だが、全文字に青緑の上書きがあるため青緑で表示される */

.device_table td.t_mark.is_note {
    color: var(--green);
}

.device_table .t_ver,
.device_table thead .t_ver {
    text-align: center;
    width: 7%;
}

.device_more {
    margin-top: 40px;
    text-align: center;
}

.device_more .ttl {
    padding-left: 13.4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 40px;
}

.device_more .txt {
    line-height: 29px;
    margin-top: 11px;
}

@media (max-width: 1180px) {
    .device_count {
        flex-wrap: wrap;
        gap: 16px;
        margin-left: auto;
        margin-right: auto;
        max-width: 560px;
    }

    .device_note {
        height: auto;
    }

    .device_maker,
    .device_list {
        max-width: 760px;
        width: auto;
    }

    .maker_box {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        height: auto;
        padding: 28px 32px;
    }

    .maker_box .ttl,
    .maker_box .txt {
        width: auto;
    }

    .list_ttl button {
        height: auto;
        min-height: 80px;
        padding: 16px 64px 16px 24px;
    }

    .list_ttl .txt {
        font-size: 20px;
        line-height: 1.5;
        margin-left: 16px;
    }

    .list_ttl .count {
        font-size: 16px;
    }

    .list_ttl button::after {
        right: 24px;
        top: calc(50% - 9.36px);
    }

    .list_body {
        padding: 26px 30px 30px;
    }

    .device_table {
        min-width: 1000px;
    }

    .device_more .ttl {
        font-size: 20px;
        line-height: 1.6;
        padding-left: 0;
    }

    .device_more .txt {
        line-height: 1.8;
    }

    .device_count .sub {
        text-wrap: balance;
    }

    /* 押せる範囲を広げる */
    .device_count .sub a {
        display: inline-block;
        padding: 6px 4px;
    }
}

@media (max-width: 767px) {
    .device .sec_lead {
        font-size: 14px;
        margin-top: 20px;
        text-align: left;
    }

    .device {
        padding: 56px 0 64px;
    }

    .device_count {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 170px));
    }

    .device_count li {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: auto;
        justify-content: center;
        aspect-ratio: 1;
        padding: 0 6px;
        width: 100%;
    }

    .device_count .label,
    .device_count .num,
    .device_count .sub,
    .device_count .is_total .label,
    .device_count .is_total .num,
    .device_count .is_total .sub {
        position: static;
    }

    .device_count .label {
        font-size: 12px;
        line-height: 1.5;
    }

    .device_count .num,
    .device_count .is_total .num {
        font-size: 34px;
        margin-top: 4px;
    }

    .device_count .num .unit {
        font-size: 12px;
    }

    .device_count .sub {
        font-size: 10px;
        letter-spacing: 0;
        line-height: 1.5;
        margin-top: 4px;
    }

    .device_note {
        text-align: left;
    }

    .maker_box {
        padding: 22px 20px;
    }

    .maker_box .ttl {
        font-size: 16px;
    }

    .maker_box .txt {
        font-size: 12px;
        line-height: 1.6;
    }

    .list_ttl button {
        border-radius: 14px;
        min-height: 68px;
        padding: 14px 52px 14px 16px;
    }

    .list_box.is_open .list_ttl button {
        border-radius: 14px 14px 0 0;
    }

    .list_ttl .icon {
        background-size: 20px;
        height: 34px;
        width: 34px;
    }

    .list_ttl .txt {
        font-size: 16px;
        margin-left: 12px;
    }

    .list_ttl .count {
        font-size: 13px;
    }

    .list_ttl button::after {
        right: 18px;
    }

    .list_body {
        border-radius: 0 0 14px 14px;
        padding: 16px 14px 20px;
    }

    .device_table {
        min-width: 620px;
    }

    .device_table th,
    .device_table td {
        font-size: 11px;
        line-height: 1.5;
        letter-spacing: 0;
    }

    .device_table .t_mark,
    .device_table thead .t_mark {
        width: 54px;
    }

    .device_table .t_ver,
    .device_table thead .t_ver {
        width: 9%;
    }

    .device_more .ttl {
        font-size: 17px;
    }

    .device_more .txt {
        font-size: 14px;
        text-align: left;
    }
}

/* ----------------  price ---------------- */
.price {
    padding: 100px 0;
}

.price_intro {
    margin-top: 40px;
    text-align: center;
}

.price_intro .ttl {
    font-size: 22px;
    font-weight: 700;
    line-height: 40px;
}

.price_intro .txt {
    font-size: 14px;
    line-height: 24px;
    margin-top: 7px;
}

.price_license {
    margin-top: 40px;
}

.price_ttl {
    color: var(--blue);
    font-size: 30px;
    font-weight: 700;
    line-height: 54px;
    text-align: center;
}

.price_ttl .s {
    font-size: 22px;
}

.price_cards {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 29.2px;
}

.price_card {
    background: #fff;
    border: 2px solid #a9a9a9;
    border-radius: 24px;
    height: 559px;
    overflow: hidden;
    position: relative;
    width: 530px;
}

.price_card.is_pro {
    border-color: var(--orange);
}

.price_card::before {
    background: #a9a9a9;
    content: '';
    height: 89.52px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.price_card.is_pro::before {
    background: var(--orange);
}

.price_card > * {
    position: absolute;
}

.price_card .name {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    left: 0;
    line-height: 37.4px;
    right: 0;
    text-align: center;
    top: 26.9px;
}

.price_card .name .txt_en {
    font-size: 26px;
    font-weight: 700;
    --ls: 0.04em;
}

.price_num {
    color: var(--orange);
    font-family: 'Figtree', sans-serif;
    font-size: 54px;
    font-weight: 800;
    left: 0;
    --ls: 0.02em;
    line-height: 1;
    right: 0;
    text-align: center;
    top: 118.5px;
}

.price_num .ls {
    --ls: 0.1em;
}

.price_num .yen {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 700;
    --ls: 0.06em;
}

.price_num .yen > span {
    font-size: 60%;
}

.price_card .maint {
    color: var(--gray);
    font-size: 12px;
    left: 0;
    --ls: 0.02em;
    line-height: 20px;
    right: 0;
    text-align: center;
    top: 182px;
}

.price_card .pill {
    background: #f4f4f4;
    border-radius: 6px;
    color: var(--orange);
    font-size: 16px;
    font-weight: 700;
    height: 39px;
    left: 53px;
    line-height: 27px;
    padding-top: 6px;
    text-align: center;
    top: 245px;
    width: 419.37px;
}

.price_card.is_pro .pill {
    background: #fff2e2;
}

.price_card .pill ~ .pill {
    top: 388px;
}

.price_card .soft {
    color: var(--gray);
    font-size: 14px;
    left: 52px;
    --ls: 0.02em;
    line-height: 24px;
    top: 292px;
}

.price_card.is_pro .soft {
    top: 293px;
}

.price_card .soft li {
    padding-left: 21px;
    position: relative;
}

.price_card .soft li::before {
    content: '•';
    left: 7px;
    position: absolute;
}

.price_card .scope_ttl {
    color: var(--orange);
    font-size: 16px;
    font-weight: 700;
    left: 59px;
    line-height: 27px;
    top: 437px;
}

.price_card .scope_txt {
    color: var(--gray);
    font-size: 14px;
    font-weight: 700;
    left: 59px;
    --ls: 0.02em;
    line-height: 24px;
    top: 464px;
    width: fit-content;
}

.price_card.is_pro .scope_txt {
    line-height: 22px;
    top: 465px;
    width: fit-content;
}

.price_note {
    font-size: 10px;
    --ls: 0.02em;
    line-height: 16px;
    margin: 29px 0 0 50px;
    width: 1000px;
}

.price_case {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 40px auto 0;
    width: 1100px;
}

.case_box2 {
    background: #f7f7f7;
    border-radius: 20px;
    height: 192px;
    padding: 30px 50px;
}

.case_box2.is_02 {
    height: 214px;
}

.case_box2 .ttl {
    color: var(--orange);
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    padding-left: 16px;
    position: relative;
}

/* 見出しの左の縦棒（flexで並べると、製品名を囲んだspanが別の部品になり語間が崩れるため、絶対配置にする） */

.case_box2 .ttl::before {
    background: var(--orange);
    border-radius: 2px;
    content: '';
    height: 22px;
    left: 0;
    position: absolute;
    top: calc(50% - 11px);
    width: 6px;
}

.case_box2 .txt {
    color: var(--gray);
    line-height: 26px;
    margin-top: 8px;
    max-width: 986px;
}

.case_box2 .txt b {
    font-weight: 700;
}

@media (max-width: 1180px) {
    .price_intro .ttl {
        font-size: 20px;
        line-height: 1.6;
    }

    .price_intro .txt {
        line-height: 1.8;
    }

    .price_ttl {
        font-size: 26px;
        line-height: 1.6;
    }

    .price_ttl .s {
        display: block;
        font-size: 18px;
    }

    .price_cards {
        align-items: center;
        flex-direction: column;
        gap: 24px;
    }

    .price_card {
        height: auto;
        max-width: 530px;
        padding: 0 32px 32px;
        width: 100%;
    }

    .price_card > * {
        position: static;
    }

    .price_card::before {
        content: none;
    }

    .price_card .name {
        background: #a9a9a9;
        margin: 0 -32px;
        padding: 20px 12px;
    }

    .price_card.is_pro .name {
        background: var(--orange);
    }

    .price_num {
        margin-top: 28px;
    }

    .price_card .maint {
        margin-top: 12px;
    }

    .price_card .pill,
    .price_card .pill ~ .pill {
        height: auto;
        margin-top: 20px;
        padding: 6px 12px;
        width: auto;
    }

    .price_card .soft,
    .price_card .scope_ttl {
        margin-top: 10px;
    }

    .price_card .scope_txt {
        margin-top: 4px;
    }

    .price_note,
    .price_case {
        margin-left: auto;
        margin-right: auto;
        max-width: 760px;
        width: auto;
    }

    .case_box2,
    .case_box2.is_02 {
        height: auto;
        padding: 28px 32px;
    }
}

@media (max-width: 767px) {
    .price {
        padding: 56px 0 64px;
    }

    .price_intro .ttl {
        font-size: 17px;
    }

    .price_intro .txt {
        font-size: 13px;
        text-align: left;
    }

    .price_ttl {
        font-size: 21px;
    }

    .price_ttl .s {
        font-size: 15px;
    }

    .price_card {
        padding: 0 20px 30px;
    }

    .price_card .name {
        font-size: 17px;
        margin: 0 -20px;
    }

    .price_card .name .txt_en {
        font-size: 20px;
    }

    .price_num {
        font-size: 42px;
    }

    .price_num .yen {
        font-size: 20px;
    }

    .case_box2,
    .case_box2.is_02 {
        padding: 26px 20px;
    }

    .case_box2 .ttl {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .case_box2 .txt {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* ----------------  faq ---------------- */
.faq {
    background: #f7f7f7;
    padding: 100px 0;
}

.faq_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 60px auto 0;
    width: 1100px;
}

.faq_item {
    background: #fff;
    border-radius: 20px;
}

.faq_q button {
    align-items: center;
    display: flex;
    gap: 14px;
    padding: 40px 90px 40px 50px;
    position: relative;
    text-align: left;
    width: 100%;
}

.faq_item .mark {
    background: var(--green);
    border-radius: 50%;
    color: #fff;
    flex-shrink: 0;
    font-size: 20px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    width: 34px;
}

.faq_a .mark {
    background: var(--orange);
}

.faq_q .txt {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
}

.faq_q button::after {
    background: url(../img/icon_caret_faq.svg) no-repeat center / contain;
    content: '';
    height: 18px;
    position: absolute;
    right: 50px;
    top: 48px;
    transform: rotate(90deg);
    transition: transform 0.3s;
    width: 18px;
}

.faq_item.is_open .faq_q button::after {
    transform: rotate(-90deg);
}

.faq_a {
    align-items: flex-start;
    border-top: 1px solid #d9d9d9;
    display: flex;
    gap: 14px;
    margin: -4px 50px 0;
    padding: 36px 0 40px;
}

.faq_a[hidden] {
    display: none;
}

.faq_a .txt {
    color: var(--gray);
    font-size: 14px;
    line-height: 25px;
    max-width: 952px;
}

@media (max-width: 1180px) {
    .faq_list {
        max-width: 760px;
        width: auto;
    }

    .faq_q .txt {
        font-size: 18px;
        line-height: 1.6;
        text-wrap: auto;
    }

    .faq_q button {
        align-items: flex-start;
        padding: 28px 72px 28px 32px;
    }

    .faq_q button::after {
        right: 30px;
        top: 36px;
    }

    .faq_a {
        margin: -4px 32px 0;
        padding: 24px 0 28px;
    }

    .faq_a .txt {
        line-height: 1.8;
    }
}

@media (max-width: 767px) {
    .faq {
        padding: 56px 0 64px;
    }

    .faq_list {
        gap: 12px;
        margin-top: 32px;
    }

    .faq_item {
        border-radius: 14px;
    }

    .faq_q button {
        gap: 12px;
        padding: 20px 40px 20px 18px;
    }

    .faq_q button::after {
        right: 16px;
        top: 25px;
    }

    .faq_item .mark {
        font-size: 16px;
        height: 28px;
        line-height: 28px;
        width: 28px;
    }

    .faq_q .txt {
        font-size: 15px;
    }

    .faq_a {
        gap: 12px;
        margin: -4px 18px 0;
        padding: 16px 0 20px;
    }

    .faq_a .txt {
        font-size: 13px;
        line-height: 1.6;
    }
}

/* ----------------  footer ---------------- */
.footer {
    padding: 60px 0;
}

.footer_top {
    height: 115px;
    position: relative;
}

.footer_logo {
    left: 1px;
    position: absolute;
    top: 0;
    width: 180px;
}

.footer_logo img {
    display: block;
}

.footer_menu {
    display: flex;
    gap: 24px;
    left: 0;
    position: absolute;
    top: 96px;
}

.footer_menu a {
    display: block;
    font-size: 12px;
    font-weight: 500;
    --ls: 0.08em;
    line-height: 18px;
    margin-right: -0.08em;
    white-space: nowrap;
}

.footer_mid {
    align-items: flex-start;
    border-top: 1px solid #d9d9d9;
    display: flex;
    height: 124px;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 26px;
}

.footer_company {
    display: flex;
    gap: 50px;
}

.footer_company .cimtops {
    margin-top: 10px;
    width: 160px;
}

.footer_company .cimtops img {
    display: block;
}

.footer_company .address {
    color: var(--gray);
    font-size: 12px;
    font-style: normal;
    --ls: 0.04em;
    line-height: 22.8px;
}

.footer_company .address b {
    font-weight: 700;
}

.footer_company .address .tel {
    display: block;
    line-height: 18px;
    margin-top: -2.1px;
}

.footer_cert {
    display: flex;
    gap: 10px;
}

.footer_cert li {
    width: 129px;
}

.footer_cert img {
    display: block;
}

.footer_bottom {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding: 0 3px;
}

.footer_bottom .trademark {
    color: var(--gray);
    font-size: 10px;
    --ls: 0.02em;
    line-height: 15px;
}

.footer_bottom .copy {
    font-size: 10px;
    --ls: 0.02em;
    line-height: 15px;
}

.footer_bottom small {
    font-size: inherit;
}

@media (max-width: 1180px) {
    .footer_top {
        height: auto;
    }

    .footer_logo,
    .footer_menu {
        position: static;
    }

    .footer_menu {
        flex-direction: column;
        gap: 0;
        margin-top: 20px;
    }

    .footer_mid {
        flex-direction: column;
        gap: 24px;
        height: auto;
        padding-bottom: 24px;
    }

    .footer_cert li {
        width: 90px;
    }

    .footer_bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-top: 0;
        padding: 0;
    }

    .footer_menu a {
        padding: 4px 0;
    }
}

@media (max-width: 767px) {
    .footer {
        padding: 40px 0 32px;
    }

    .footer_logo {
        display: block;
        width: 150px;
    }

    .footer_company {
        flex-direction: column;
        gap: 16px;
    }

    .footer_company .cimtops {
        width: 110px;
    }

    .footer_cert li {
        width: 60px;
    }
}