/*
Theme Name: kinjyo-jyuki v26 Theme
Theme URI: https://www.kinjyo-jyuki.co.jp
Description: Designed by ML Design
Version: 26.02
Author: ML Design
Author URI: https://www.ml-design.jp/
Tags:
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?28mc1l');
    src:  url('fonts/icomoon.eot?28mc1l#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?28mc1l') format('truetype'),
    url('fonts/icomoon.woff?28mc1l') format('woff'),
    url('fonts/icomoon.svg?28mc1l#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-arrow_down:before {
    content: "\e900";
}
.icon-arrow_left:before {
    content: "\e901";
}
.icon-arrow_right:before {
    content: "\e902";
}
.icon-arrow_up:before {
    content: "\e903";
}
.icon-cautch:before {
    content: "\e904";
}
.icon-contact:before {
    content: "\e906";
}
.icon-external:before {
    content: "\e907";
}
.icon-external_link_logo_01:before {
    content: "\e908";
}
.icon-external_link_logo_02:before {
    content: "\e909";
}
.icon-external_link_logo_03:before {
    content: "\e90b";
}
.icon-external_link_logo_04:before {
    content: "\e912";
}
.icon-logo_a:before {
    content: "\e915";
}
.icon-logo_b:before {
    content: "\e916";
}
.icon-menu:before {
    content: "\e919";
}
.icon-under_logo_b:before {
    content: "\e91a";
}
.icon-home:before {
    content: "\e90a";
}
.icon-location:before {
    content: "\e90c";
}
.icon-clock:before {
    content: "\e90d";
}
.icon-arrow-left:before {
    content: "\e90e";
}
.icon-arrow-up:before {
    content: "\e90f";
}
.icon-arrow-right:before {
    content: "\e910";
}
.icon-arrow-down:before {
    content: "\e911";
}
.icon-facebook:before {
    content: "\e913";
}
.icon-instagram:before {
    content: "\e914";
}
.icon-line:before {
    content: "\e905";
}
.icon-x:before {
    content: "\e917";
}
.icon-youtube:before {
    content: "\e918";
}
.icon-mobile:before {
    content: "\e958";
}

/* clamp処理 */
:root {
    --view-start: 360;
    --view-end: 1400;
    
    --progress: calc((100vw - (var(--view-start) * 1px)) / ((var(--view-end) - var(--view-start)) * 1px));
}

/* common */
*{
    margin: 0px;
    padding: 0px;
}
body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}
li { list-style: none; }
img { border: none 0px; }
a {
    transition: 0.3s;
    &:hover { color: #F60; }
    &:hover img { opacity: 0.8; translate: 1px 1px; }
}
.alignright { float: right; }
.alignleft { float: left; }
img.alignleft { margin-right: 8px; margin-bottom: 8px; }
img.alignright { margin-left: 8px; margin-bottom: 8px; }
.aligncenter { text-align: center!important; display: block; }
.float_right { float: right; margin-left: 10px; }
.float_left { float: left; margin-right: 10px; }
.clear { clear: both; }
.post-edit-link {
    font-size: 1.3rem;
    font-weight: bold;
    color: #FF0000;
    background-color: #F0F0F0;
    text-decoration: none;
    text-align: center;
    display: block;
    clear: both;
    border: 1px dashed #CCCCCC;
    padding-top: 5px;
    padding-bottom: 5px;
}
.red{ color: #FF0000; }
.orange { color: #c16b1a; }
.blue{ color: #0000FF; }
.green { color: #006600; }


/* wp-pagenavi */
.wp-pagenavi {
    clear: both;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    margin-right: 10px;
    margin-left: 10px;
}
.wp-pagenavi span,
.wp-pagenavi a {
    font-size: 1.8rem!important;
    display: block;
    float: left;
    padding-right: 8px!important;
    padding-left: 8px!important;
    border: none;
    margin: 4px;
    border-radius: 5px;
}
.wp-pagenavi span {
    background-color: #7994a7;
    color: #FFFFFF;
}
.wp-pagenavi a {
    color: #FFFFFF!important;
    background-color: #3d4099;
}


/* block */
#wrapper {
    width: 100%;
    contain: paint;
}
#upper_block {
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
#upper_block_inner {
    text-align: left;
    width: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    overflow: hidden;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 40px;
    overflow: hidden;
}
#middle_block {
    margin: 0px;
    width: 100%;
}
#middle_block_inner {
    text-align: left;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 15px;
    overflow: hidden;
}
#under_block {
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}
@media (width >= 375px)  { /* 375-789 */
    #middle_block_inner { width: 100%; }
}
@media (width >= 790px)  { /* 790-999 */
    #middle_block_inner { width: 100%; }
}
@media (width >= 1000px) { /* 1000-1400 */
    #middle_block_inner { width: 1000px; }
}
@media (width >= 1400px) { /* 1400over */
    #middle_block_inner { width: 1400px; }
}


/* scroller */
#scroller {
    --font-min: 1.4;
    --font-max: 1.7;
    --wide-min: 40;
    --wide-max: 60;
    
    position: fixed;
    z-index: 9;
    right: 5px;
    bottom: 17px;
    display: block;
    transition: 0.9s;  
    a {
        font-size: clamp(
            calc(var(--font-min) * 1rem),
            calc((var(--font-min) + (var(--font-max) - var(--font-min)) * var(--progress)) * 1rem),
            calc(var(--font-max) * 1rem)
        );
        width: clamp(
            calc(var(--wide-min) * 1px),
            calc((var(--wide-min) + (var(--wide-max) - var(--wide-min)) * var(--progress)) * 1px),
            calc(var(--wide-max) * 1px)
        );
        height: clamp(
            calc(var(--wide-min) * 1px),
            calc((var(--wide-min) + (var(--wide-max) - var(--wide-min)) * var(--progress)) * 1px),
            calc(var(--wide-max) * 1px)
        );
        color: #fff;
        background-color: #51a1a5;
        text-align: center;
        text-decoration: none;
        display: none;
        border-radius: 3px;
        &:hover {
            background-color: #F60;
        }
        span {
            transform: translate(0px, 50%);
            display: block;
        }
    }
}
.appearance a {
    display: block!important;
}


/* entry */
.entry {
    --font-h1-min: 1.5; --font-h1-max: 2.3;
    --font-h2-min: 1.3; --font-h2-max: 2.0;
    --font-h3-min: 1.1; --font-h3-max: 1.7;
    --font-h4-min: 0.9; --font-h4-max: 1.4;
    --font-h5-min: 0.9; --font-h5-max: 1.4;
    --font-p-min: 0.9; --font-p-max: 1.3;
    --font-li-min: 0.8; --font-li-max: 1.2; /* li,dt,dd */

    --entry-h1-margin-bottom-min: 12; --entry-h1-margin-bottom-max: 32;
    --entry-h2-padding-block-min: 12; --entry-h2-padding-block-max: 20;
    --entry-p-padding-bottom-min: 11; --entry-p-padding-bottom-max: 18;

    width: auto;
    clear: both;
    padding-top: 35px;
    padding-bottom: 35px;
    margin-inline: 10px;
    overflow: hidden;
    h1 {
        font-size: clamp(
            calc(var(--font-h1-min) * 1rem),
            calc((var(--font-h1-min) + (var(--font-h1-max) - var(--font-h1-min)) * var(--progress)) * 1rem),
            calc(var(--font-h1-max) * 1rem)
        );
        text-align: center;
        padding-block: 8px;
        margin-bottom: clamp(
            calc(var(--entry-h1-margin-bottom-min) * 1px),
            calc((var(--entry-h1-margin-bottom-min) + (var(--entry-h1-margin-bottom-max) - var(--entry-h1-margin-bottom-min)) * var(--progress)) * 1px),
            calc(var(--entry-h1-margin-bottom-max) * 1px)
        );
        transition: font-size 0.6s ease;
    }
    h2 {
        font-size: clamp(
            calc(var(--font-h2-min) * 1rem),
            calc((var(--font-h2-min) + (var(--font-h2-max) - var(--font-h2-min)) * var(--progress)) * 1rem),
            calc(var(--font-h2-max) * 1rem)
        );
        margin-top: 15px;
        padding-block: clamp(
            calc(var(--entry-h2-padding-block-min) * 1px),
            calc((var(--entry-h2-padding-block-min) + (var(--entry-h2-padding-block-max) - var(--entry-h2-padding-block-min)) * var(--progress)) * 1px),
            calc(var(--entry-h2-padding-block-max) * 1px)
        );
        border-top: 1px solid #ccc;
        transition: 0.6s;
    }
    h3 { 
        font-size: clamp(
            calc(var(--font-h3-min) * 1rem),
            calc((var(--font-h3-min) + (var(--font-h3-max) - var(--font-h3-min)) * var(--progress)) * 1rem),
            calc(var(--font-h3-max) * 1rem)
        );
        padding: 5px 0 15px;
    }
    h4 {
        font-size: clamp(
            calc(var(--font-h4-min) * 1rem),
            calc((var(--font-h4-min) + (var(--font-h4-max) - var(--font-h4-min)) * var(--progress)) * 1rem),
            calc(var(--font-h4-max) * 1rem)
        );
        padding: 5px 0 15px;
    }
    h5 {
        font-size: clamp(
            calc(var(--font-h5-min) * 1rem),
            calc((var(--font-h5-min) + (var(--font-h5-max) - var(--font-h5-min)) * var(--progress)) * 1rem),
            calc(var(--font-h5-max) * 1rem)
        );
        padding: 5px 0 15px;
    }
    p {
        font-size: clamp(
            calc(var(--font-p-min) * 1rem),
            calc((var(--font-p-min) + (var(--font-p-max) - var(--font-p-min)) * var(--progress)) * 1rem),
            calc(var(--font-p-max) * 1rem)
        );
        line-height: 1.8;
        padding-bottom: var(--entry-p-padding-bottom);
        padding-bottom: clamp(
            calc(var(--entry-p-padding-bottom-min) * 1px),
            calc((var(--entry-p-padding-bottom-min) + (var(--entry-p-padding-bottom-max) - var(--entry-p-padding-bottom-min)) * var(--progress)) * 1px),
            calc(var(--entry-p-padding-bottom-max) * 1px)
        );
        padding-inline: 5px;
        transition: 0.6s;
    }
    &:is(ul, ol) {
        padding: 5px 0 15px 10px;
        & li {
            font-size: clamp(
                calc(var(--font-li-min) * 1rem),
                calc((var(--font-li-min) + (var(--font-li-max) - var(--font-li-min)) * var(--progress)) * 1rem),
                calc(var(--font-li-max) * 1rem)
            );
            line-height: 2;
            margin-bottom: 3px;
            padding-left: 10px;
            border-bottom: 1px solid #999;
        }
    }
    dl {
        padding: 5px 15px 15px 14px;
        dt {
            font-size: clamp(
                calc(var(--font-li-min) * 1rem),
                calc((var(--font-li-min) + (var(--font-li-max) - var(--font-li-min)) * var(--progress)) * 1rem),
                calc(var(--font-li-max) * 1rem)
            );
            font-weight: bold;
            line-height: 1.5;
            margin: 5px 0 3px;
            padding-left: 5px;
        }
        dd {
            font-size: clamp(
                calc(var(--font-li-min) * 1rem),
                calc((var(--font-li-min) + (var(--font-li-max) - var(--font-li-min)) * var(--progress)) * 1rem),
                calc(var(--font-li-max) * 1rem)
            );
            padding: 2px 0 3px 35px;
            border-bottom: 1px dotted #fff;
        }
    }
    table {
        width: 100%;
        border-top-width: 1px;
        border-left-width: 1px;
        border-top-style: solid;
        border-left-style: solid;
        border-top-color: #CCCCCC;
        border-left-color: #CCCCCC;
        :is(td, th) {
            font-size: clamp(
                calc(var(--font-li-min) * 1rem),
                calc((var(--font-li-min) + (var(--font-li-max) - var(--font-li-min)) * var(--progress)) * 1rem),
                calc(var(--font-li-max) * 1rem)
            );
            padding: 3px;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #CCCCCC;
            border-right-width: 1px;
            border-right-style: solid;
            border-right-color: #CCCCCC;
        }
    }
}


/*  */
#sub_machine_area {
    --font-li-min: 0.8; --font-li-max: 1.7; /* td */
    --sub-machine-img-width: 110px;

    margin-left: 20px;
    margin-right: 20px;
    table {
        width: 100%;
        border-top: solid 1px #ccc;
        a {
            color: #fff;
            text-decoration: none;
            display: block;
            width: 100%;
            height: auto;
        }
        td {
            border-bottom: solid 1px #ccc;
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 20px;
        }
        .machine_title {
            font-size: clamp(
                calc(var(--font-li-min) * 1rem),
                calc((var(--font-li-min) + (var(--font-li-max) - var(--font-li-min)) * var(--progress)) * 1rem),
                calc(var(--font-li-max) * 1rem)
            );
            background-color: #00bbb6;
            text-align: center;
            justify-content: center; /* 子要素を水平方向に中央寄せ */
            width: 40%;
            height: 100%;
        }
        .machine_content {
            font-size: clamp(
                calc(var(--font-li-min) * 1rem),
                calc((var(--font-li-min) + (var(--font-li-max) - var(--font-li-min)) * var(--progress)) * 1rem),
                calc(var(--font-li-max) * 1rem)
            );
            width: 60%;
            height: 100%;
        }
        img {
            width: var(--sub-machine-img-width);
            height: auto;
            border-radius: 5px;
        }
    }
}
@media (width >= 375px)  { /* 375-789 */
    #sub_machine_area { --sub-machine-img-width: 180px; }
}
@media (width >= 790px)  { /* 790-999 */
    #sub_machine_area { --sub-machine-img-width: 220px; }
}
@media (width >= 1000px) { /* 1000-1400 */
    #sub_machine_area { --sub-machine-img-width: 300px; }
}
@media (width >= 1400px) { /* 1400over */
    #sub_machine_area { --sub-machine-img-width: 400px; }
}


/* logo */
#logo_bg {
    position: absolute;
    top: var(--logobg-top);
    left: -45px;
    z-index: 2;
    width: var(--logobg-w);
    height: var(--logobg-h);
    background-image: url(image/base/logo_bg.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0 0;
    transition: 0.2s;
    #logo_a {
        width: auto;
        height: auto;
        position: absolute;
        a {
            color: #E7383B;
            text-decoration: none;
            display: block;
            width: var(--logo-a-w);
            height: auto;
            margin-top: var(--logo-a-top);
            margin-left: var(--logo-a-left);
            span { font-size: var(--logo-a-font-size); }
            &:hover { color: #f60; }
        }
    }
    #logo_b {
        margin-top: var(--logo-b-top);
        margin-left: var(--logo-b-left);
        span {
            font-size: var(--logo-b-font-size);
            color: #E7383B;
        }
    }
}
#logo_bg {
    --logobg-top: 541px;
    --logobg-w: 202px; --logobg-h: 93px;
    --logo-a-w: 100%;
    --logo-a-top: 15px; --logo-a-left: 55px;
    --logo-a-font-size: 2.1rem;
    --logo-b-top: 63px; --logo-b-left: 105px;
    --logo-b-font-size: 1.0rem;
    .subpage & {
        top: var(--subpage-logobg-top);
        --subpage-logobg-top: 211px;
    }
}
@media (width >= 375px)  { /* 375-789 */
    #logo_bg {
        --logobg-top: 583px;
        --logobg-w: 230px; --logobg-h: 109px;
        --logo-a-w: 76px;
        --logo-a-top: 16px; --logo-a-left: 60px;
        --logo-a-font-size: 2.5rem;
        --logo-b-top: 76px; --logo-b-left: 112px;
        --logo-b-font-size: 1.1rem;
        .subpage & {
            --subpage-logobg-top: 243px;
        }
    }
}
@media (width >= 790px)  { /* 790-999 */
    #logo_bg {
        --logobg-top: 591px;
        --logobg-w: 340px; --logobg-h: 157px;
        --logo-a-w: 102px;
        --logo-a-top: 21px; --logo-a-left: 79px;
        --logo-a-font-size: 3.9rem;
        --logo-b-top: 115px; --logo-b-left: 178px;
        --logo-b-font-size: 1.5rem;
        .subpage & {
            --subpage-logobg-top: 271px;
        }
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #logo_bg {
        --logobg-top: 665px;
        --logobg-w: 462px; --logobg-h: 212px;
        --logo-a-w: 135px;
        --logo-a-top: 30px; --logo-a-left: 107px;
        --logo-a-font-size: 5.4rem;
        --logo-b-top: 156px; --logo-b-left: 236px;
        --logo-b-font-size: 2.0rem;
        .subpage & {
            --subpage-logobg-top: 265px;
        }
    }
}
@media (width >= 1400px) { /* 1400over */
    #logo_bg {
        --logobg-top: 728px;
        --logobg-w: 555px; --logobg-h: 250px;
        --logo-a-w: 165px;
        --logo-a-top: 35px; --logo-a-left: 129px;
        --logo-a-font-size: 6.3rem;
        --logo-b-top: 191px; --logo-b-left: 260px;
        --logo-b-font-size: 2.1rem;
        .subpage & {
            --subpage-logobg-top: 328px;
        }
    }
}


/* modal_nav */
#modal_nav {
    position: absolute;
    top: var(--modal-nav-top);
    right: 0;
    z-index: 9;
    width: var(--modal-nav-w);
    height: var(--modal-nav-h);
    background-image: url(image/base/menu_bg.svg);
    background-repeat: no-repeat;
    background-position: right 0;
    background-size: 100% auto;
    transition: 0.2s;
    ul {
        overflow: hidden;
        li {
            position: absolute;
            width: var(--modal-li-w);
            height: var(--modal-li-h);
            &.m1 { top: var(--m1-top); left: var(--m1-left); }
            &.m2 { top: var(--m2-top); left: var(--m2-left); }
            a {
                text-decoration: none;
                display: block;
                font-size: var(--font-size);
                line-height: 1.3;
                font-weight: bold;
                color: #000;
                text-align: center;
                &:hover { color: #f60; }
                span { float: left; }
                small {
                    display: var(--small-display, block);
                    font-size: 43%;
                    translate: 0 var(--small-y);
                }
            }
        }
    }
    .subpage & {
        top: var(--subpage-modal-nav-top);
    }
    &.fixed {
        position: fixed;
        top: 0;
        height: var(--fix-modal-h);
        background-image: url(image/base/menu_bg_fix.svg);
        --small-display: none;
        --modal-nav-h: var(--fix-modal-h);
        --modal-li-w: var(--fix-modal-li-w);
        --modal-li-h: var(--fix-modal-li-h);
        --m1-top: var(--fix-m1-t);
        --m1-left: var(--fix-m1-l);
        --m2-top: var(--fix-m2-t);
        --m2-left: var(--fix-m2-l);
        .subpage &.fixed {
            top: 0;
        }
    }
}
#modal_nav {
    --modal-nav-w: 167px; --modal-nav-h: 78px; --modal-nav-top: 579px;
    --modal-li-w: 67px; --modal-li-h: 21px;
    --m1-top: 17px; --m1-left: 93px;
    --m2-top: 45px; --m2-left: 40px;
    --font-size: 1.2rem; --small-y: 4px;
    --fix-modal-h: 57px;
    --fix-modal-li-w: 26px; --fix-modal-li-h: 22px;
    --fix-m1-t: 11px; --fix-m1-l: 130px;
    --fix-m2-t: 25px; --fix-m2-l: 65px;
    .subpage & {
        --subpage-modal-nav-top: 247px;
    }
}
@media (width >= 375px)  { /* 375-789 */
    #modal_nav {
        --modal-nav-w: 179px; --modal-nav-h: 84px; --modal-nav-top: 627px;
        --modal-li-w: 79px; --modal-li-h: 25px;
        --m1-top: 15px; --m1-left: 92px;
        --m2-top: 48px; --m2-left: 37px;
        --font-size: 1.4rem; --small-y: 5px;
        --fix-modal-h: 69px;
        --fix-modal-li-w: 29px; --fix-modal-li-h: 24px;
        --fix-m1-t: 11px; --fix-m1-l: 136px;
        --fix-m2-t: 28px; --fix-m2-l: 71px;
        .subpage & {
            --subpage-modal-nav-top: 286px;
        }
    }
}
@media (width >= 790px) { /* 790-999 */
    #modal_nav {
        --modal-nav-w: 260px; --modal-nav-h: 120px; --modal-nav-top: 655px;
        --modal-li-w: 91px; --modal-li-h: 30px;
        --m1-top: 25px; --m1-left: 139px;
        --m2-top: 69px; --m2-left: 58px;
        --font-size: 1.9rem; --small-y: 7px;
        --fix-modal-h: 87px;
        --fix-modal-li-w: 42px; --fix-modal-li-h: 35px;
        --fix-m1-t: 15px; --fix-m1-l: 189px;
        --fix-m2-t: 40px; --fix-m2-l: 102px;
        .subpage & {
            --subpage-modal-nav-top: 335px;
        }
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #modal_nav {
        --modal-nav-w: 306px; --modal-nav-h: 141px; --modal-nav-top: 759px;
        --modal-li-w: 117px; --modal-li-h: 35px;
        --m1-top: 29px; --m1-left: 168px;
        --m2-top: 81px; --m2-left: 61px;
        --font-size: 2.2rem; --small-y: 8px;
        --fix-modal-h: 101px;
        --fix-modal-li-w: 49px; --fix-modal-li-h: 39px;
        --fix-m1-t: 16px; --fix-m1-l: 211px;
        --fix-m2-t: 46px; --fix-m2-l: 119px;
        .subpage & {
            --subpage-modal-nav-top: 359px;
        }
    }
}
@media (width >= 1400px) { /* 1400over */
    #modal_nav {
        --modal-nav-w: 343px; --modal-nav-h: 157px; --modal-nav-top: 845px;
        --modal-li-w: 126px; --modal-li-h: 45px;
        --m1-top: 32px; --m1-left: 191px;
        --m2-top: 90px; --m2-left: 72px;
        --font-size: 2.5rem; --small-y: 11px;
        --fix-modal-h: 114px;
        --fix-modal-li-w: 61px; --fix-modal-li-h: 45px;
        --fix-m1-t: 15px; --fix-m1-l: 240px;
        --fix-m2-t: 50px; --fix-m2-l: 127px;
        .subpage & {
            --subpage-modal-nav-top: 444px;
        }
    }
}


/* sl sub_theme */
#sl {
    overflow: hidden;
    height: var(--sl-height);
    --sl-height: 600px;
    video {
        height: var(--sl-height);
        width: 100%;
        position: absolute;
        object-fit: cover;
        object-position: center center;
    }
    .subpage & {
        --sl-height: 270px;
    }
    #sub_theme {
        overflow: hidden;
        height: var(--sl-height);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #333;
        &.detail_all {
            background-image: url(image/sl/detail_all.webp);
        }
        &.detail_concept {
            background-image: url(image/sl/detail_concept.webp);
        }
        &.detail_tech {
            background-image: url(image/sl/detail_tech.webp);
        }
        &.detail_lease {
            background-image: url(image/sl/detail_lease.webp);
        }
        &.detail_machine {
            background-image: url(image/sl/detail_machine.webp);
        }
        &.detail_flow {
            background-image: url(image/sl/detail_flow.webp);
        }
        &.detail_news_staff {
            background-image: url(image/sl/detail_news_staff.webp);
        }
        &.detail_company {
            background-image: url(image/sl/detail_company.webp);
        }
        &.detail_history {
            background-image: url(image/sl/detail_history.webp);
        }
        &.detail_philosophy {
            background-image: url(image/sl/detail_philosophy.webp);
        }
        &.detail_environment {
            background-image: url(image/sl/detail_environment.webp);
        }
    }
}
@media (width >= 375px)  { /* 375-789 */
    #sl {
        --sl-height: 650px;
        .subpage & {
            --sl-height: 310px;
        }
    }
}
@media (width >= 790px)  { /* 790-999 */
    #sl {
        --sl-height: 690px;
        .subpage & {
            --sl-height: 310px;
        }
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #sl {
        --sl-height: 800px;
        .subpage & {
            --sl-height: 400px;
        }
    }
}

@media (width >= 1400px) { /* 1400over */
    #sl {
        --sl-height: 890px;
        .subpage & {
            --sl-height: 490px;
        }
    }
}


/* cauth */
#cautch {
    --font-min: 12;
    --font-max: 22;
    
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    top: var(--cautch-top);
    right: var(--cautch-right);
    z-index: 4;
    span {
        font-size: clamp(
            calc(var(--font-min) * 1rem),
            calc((var(--font-min) + (var(--font-max) - var(--font-min)) * var(--progress)) * 1rem),
            calc(var(--font-max) * 1rem)
        );
        color: #fff;
        text-align: center;
        filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.6));
    }
}
#cautch {
    --cautch-top: 364px; --cautch-right: 20px;
}
@media (width >= 375px)  { /* 375-789 */
    #cautch {
        --cautch-top: 370px; --cautch-right: 20px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #cautch {
        --cautch-top: 200px; --cautch-right: 46px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #cautch {
        --cautch-top: 230px; --cautch-right: 53px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #cautch {
        --cautch-top: 240px; --cautch-right: 70px;
    }
}


/* disp */
#disp {
    text-align: var(--disp-text-align);
    width: var(--disp-w);
    height: auto;
    padding-top: var(--disp-top);
    padding-left: var(--disp-left);
    padding-right: 20px;
    float: var(--disp-float);
    overflow: hidden;
    h1 {
        --font-min: 1.2;
        --font-max: 1.7;

        font-size: clamp(
            calc(var(--font-min) * 1rem),
            calc((var(--font-min) + (var(--font-max) - var(--font-min)) * var(--progress)) * 1rem),
            calc(var(--font-max) * 1rem)
        );
        font-weight: 300;
        display: block;
    }
    h2 {
        --font-min: 0.8;
        --font-max: 1.2;

        font-size: clamp(
            calc(var(--font-min) * 1rem),
            calc((var(--font-min) + (var(--font-max) - var(--font-min)) * var(--progress)) * 1rem),
            calc(var(--font-max) * 1rem)
        );
        font-weight: 300;
        display: block;
        padding-top: 6px;
    }
}
#disp {
    --disp-text-align: center;
    --disp-w: 100%;
    --disp-top: 100px; --disp-left: 20px;
    --disp-float: none;
}
@media (width >= 375px)  { /* 375-789 */
    #disp {
        --disp-text-align: center;
        --disp-w: 100%;
        --disp-top: 92px; --disp-left: 20px;
        --disp-float: none;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #disp {
        --disp-text-align: center;
        --disp-w: 100%;
        --disp-top: 92px; --disp-left: 20px;
        --disp-float: none;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #disp {
        --disp-text-align: left;
        --disp-w: 350px;
        --disp-top: 120px; --disp-left: 0px;
        --disp-float: right;
    }
}
@media (width >= 1400px) { /* 1400over */
    #disp {
        --disp-text-align: left;
        --disp-w: 400px;
        --disp-top: 140px; --disp-left: 0px;
        --disp-float: right;
    }
}


/* first_block - third_block */
#first_block {
    width: 100%;
    height: 883px;
    position: relative;
}
.sub_page #first_block {
    height: auto!important;
}
#second_block {
    width: 100%;
    height: 701px;
    position: relative;
}
#third_block {
    background-color: #afe5e4;
    height: 1316px;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}
#fouth_block {
    width: 100%;
    height: 732px;
    position: relative;
}
#fifth_block {
    width: 100%;
    height: 1190px;
    position: relative;
}
@media (width >= 375px)  { /* 375-789 */
    #first_block { height: 938px; }
    #second_block { height: 847px; }
    #third_block { height: 1086px; }
    #fouth_block { height: 712px; }
    #fifth_block { height: 1291px; }
}
@media (width >= 790px)  { /* 790-999 */
    #first_block { height: 741px; }
    #second_block { height: 556px; }
    #third_block { height: 887px; }
    #fouth_block { height: 752px; }
    #fifth_block { height: 1041px; }
}
@media (width >= 1000px) { /* 1000-1400 */
    #first_block { height: 770px; }
    #second_block { height: 513px; }
    #third_block { height: 757px; }
    #fouth_block { height: 710px; }
    #fifth_block { height: 1118px; }
}
@media (width >= 1400px) { /* 1400over */
    #first_block { height: 793px; }
    #second_block { height: 551px; }
    #third_block { height: 943px; }
    #fouth_block { height: 699px; }
    #fifth_block { height: 1286px; }
}


/* panel */
.panel {
    h1 {
        font-size: var(--panel-h1-font-size);
        font-weight: 900;
        text-align: center;
        text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff;
        padding-bottom: var(--panel-padding-bottom);
        margin-bottom: var(--panel-margin-bottom);
        border-bottom: solid 3px #00bbb6;
    }
    p {
        font-size: var(--panel-p-font-size);
        font-weight: 400;
    }
}
.panel {
    --panel-h1-font-size: 1.2rem;
    --panel-padding-bottom: 10px;
    --panel-margin-bottom: 10px;
    --panel-p-font-size: 0.8rem;
}
@media (width >= 375px)  { /* 375-789 */
    .panel {
        --panel-h1-font-size: 1.3rem;
        --panel-padding-bottom: 11px;
        --panel-margin-bottom: 14px;
        --panel-p-font-size: 0.9rem;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .panel {
        --panel-h1-font-size: 1.9rem;
        --panel-padding-bottom: 12px;
        --panel-margin-bottom: 18px;
        --panel-p-font-size: 1.2rem;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .panel {
        --panel-h1-font-size: 2.4rem;
        --panel-padding-bottom: 14px;
        --panel-margin-bottom: 25px;
        --panel-p-font-size: 1.4rem;
    }
}
@media (width >= 1400px) { /* 1400over */
    .panel {
        --panel-h1-font-size: 3.0rem;
        --panel-padding-bottom: 16px;
        --panel-margin-bottom: 32px;
        --panel-p-font-size: 1.6rem;
    }
}


/* fifth_block */
#fifth_block ul {
    overflow: hidden;
    padding-top: var(--fifth_block-ul-padding-top);
    li {
        font-size: var(--fifth_block-li-font-size);
        border-bottom: dashed 1px #333;
        width: fit-content;
        display: block;
        padding-top: 7px;
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 3px;
        &::before {
            content: "\025cf";
            padding-right: 3px;
        }
    }
}
#fifth_block ul {
    --fifth_block-ul-padding-top: 11px;
    --fifth_block-li-font-size: 0.9rem;
}
@media (width >= 375px)  { /* 375-789 */
    #fifth_block ul {
        --fifth_block-ul-padding-top: 12px;
        --fifth_block-li-font-size: 0.9rem;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #fifth_block ul {
        --fifth_block-ul-padding-top: 14px;
        --fifth_block-li-font-size: 1.2rem;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #fifth_block ul {
        --fifth_block-ul-padding-top: 16px;
        --fifth_block-li-font-size: 1.3rem;
    }
}
@media (width >= 1400px) { /* 1400over */
    #fifth_block ul {
        --fifth_block-ul-padding-top: 18px;
        --fifth_block-li-font-size: 1.5rem;
    }
}


/* button_detail */
.button_detail {
    position: absolute;
    background-color: #AC2323;
    clip-path: polygon(6% 0, 84% 0, 100% 100%, 0% 100%);
    a {
        font-size: var(--buttondetail-font-size);
        font-weight: 900;
        color: #fff;
        background-color: #D03E6C;
        text-decoration: none;
        text-align: center;
        display: block;
        width: auto;
        height: auto;
        padding-top: var(--buttondetail-padding-top);
        padding-left: var(--buttondetail-padding-left);
        padding-right: var(--buttondetail-padding-right);
        padding-bottom: var(--buttondetail-padding-bottom);
        margin-right: var(--buttondetail-margin-right);
        clip-path: polygon(6% 0, 84% 0, 100% 100%, 0% 100%);
        &:hover {
            background-color: #f60;
        }
        span {
            font-size: 80%;
            padding-left: 6px;
        }
    }
}
.button_detail_01 {
    top: var(--buttondetail-01-top);
    right: var(--buttondetail-01-right);
}
.button_detail_02 {
    top: var(--buttondetail-02-top);
}
.button_detail_03 {
    top: var(--buttondetail-03-top);
}
.button_detail_04 {
    top: var(--buttondetail-04-top);
}

.button_detail {
    --buttondetail-font-size: 0.9rem;
    --buttondetail-padding-top: 2px; --buttondetail-padding-left: 14px; --buttondetail-padding-right: 20px; --buttondetail-padding-bottom: 2px;
    --buttondetail-margin-right: 12px;
}
.button_detail_01 {
    --buttondetail-01-top: 1206px; --buttondetail-01-right: 20px;
}
.button_detail_02 {
    --buttondetail-02-top: 233px;
}
.button_detail_03 {
    --buttondetail-03-top: 240px;
}
.button_detail_04 {
    --buttondetail-04-top: 138px;
}
@media (width >= 375px)  { /* 375-789 */
    .button_detail {
        --buttondetail-font-size: 1.1rem;
        --buttondetail-padding-top: 2px; --buttondetail-padding-left: 17px; --buttondetail-padding-right: 22px; --buttondetail-padding-bottom: 2px;
        --buttondetail-margin-right: 14px;
    }
    .button_detail_01 {
        --buttondetail-01-top: 958px; --buttondetail-01-right: 20px;
    }
    .button_detail_02 {
        --buttondetail-02-top: 168px;
    }
    .button_detail_03 {
        --buttondetail-03-top: 260px;
    }
    .button_detail_04 {
        --buttondetail-04-top: 132px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .button_detail {
        --buttondetail-font-size: 1.2rem;
        --buttondetail-padding-top: 2px; --buttondetail-padding-left: 23px; --buttondetail-padding-right: 28px; --buttondetail-padding-bottom: 2px;
        --buttondetail-margin-right: 16px;
    }
    .button_detail_01 {
        --buttondetail-01-top: 745px; --buttondetail-01-right: 35px;
    }
    .button_detail_02 {
        --buttondetail-02-top: 175px;
    }
    .button_detail_03 {
        --buttondetail-03-top: 317px;
    }
    .button_detail_04 {
        --buttondetail-04-top: 183px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .button_detail {
        --buttondetail-font-size: 1.4rem;
        --buttondetail-padding-top: 4px; --buttondetail-padding-left: 34px; --buttondetail-padding-right: 38px; --buttondetail-padding-bottom: 4px;
        --buttondetail-margin-right: 19px;
    }
    .button_detail_01 {
        --buttondetail-01-top: 671px; --buttondetail-01-right: calc(50% - 450px);
    }
    .button_detail_02 {
        --buttondetail-02-top: 225px;
    }
    .button_detail_03 {
        --buttondetail-03-top: 367px;
    }
    .button_detail_04 {
        --buttondetail-04-top: 201px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .button_detail {
        --buttondetail-font-size: 1.6rem;
        --buttondetail-padding-top: 5px; --buttondetail-padding-left: 41px; --buttondetail-padding-right: 50px; --buttondetail-padding-bottom: 5px;
        --buttondetail-margin-right: 22px;
    }
    .button_detail_01 {
        --buttondetail-01-top: 816px; --buttondetail-01-right: calc(50% - 650px);
    }
    .button_detail_02 {
        --buttondetail-02-top: 231px;
    }
    .button_detail_03 {
        --buttondetail-03-top: 392px;
    }
    .button_detail_04 {
        --buttondetail-04-top: 215px;
    }
}


/* machinery_detail */
.machinery_detail {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    em {
        font-size: var(--machinery_detail-font-size);
        font-feature-settings: "palt";
        line-height: 1.2;
        font-style: normal;
        font-weight: 400;
        color: #333;
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
        display: inline-block;
        width: max-content;
        height: auto;
        padding-top: 2px;
        padding-bottom: 5px;
        margin-bottom: 2px;
        background-repeat: no-repeat;
        background-size: auto 100%;
        &.direction_left {
            padding-left: var(--machinery_detail-direction_left-padding-left);
            padding-right: var(--machinery-detail-direction_left-padding-right);
            background-image: url(image/base/machinery_detail_direction_left.svg);
            background-position: bottom left;
        }
        &.direction_right {
            padding-left: var(--machinery_detail-direction_right-padding-left);
            padding-right: var(--machinery_detail-direction_right-padding-right);
            background-image: url(image/base/machinery_detail_direction_right.svg);
            background-position: bottom right;
        }
    }
    &.machinery_detail_01 {
        top: var(--machinery_detail_01-top);
        left: var(--machinery_detail_01-left);
    }
    &.machinery_detail_02 {
        top: var(--machinery_detail_02-top);
        right: var(--machinery_detail_02-right);
        animation: moveDiagonal_detail_02 linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }
    &.machinery_detail_03 {
        top: var(--machinery_detail_03-top);
        left: var(--machinery_detail_03-left);
        animation: moveDiagonal_detail_03 linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }
    &.machinery_detail_04 {
        top: var(--machinery_detail_04-top);
        right: var(--machinery_detail_04-right);
    }
    &.machinery_detail_05 {
        top: var(--machinery_detail_05-top);
        left: var(--machinery_detail_05-left);
        animation: moveDiagonal_detail_04 linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }
    &.machinery_detail_06 {
        top: var(--machinery_detail_06-top);
        right: var(--machinery_detail_06-right);
    }
    &.machinery_detail_07 {
        top: var(--machinery_detail_07-top);
        right: var(--machinery_detail_07-right);
        animation: moveDiagonal_detail_05 linear both;
        animation-timeline: view();
        animation-range: entry 40% exit 90%;
    }
}
@keyframes moveDiagonal_detail_02 {
    from { transform: translate(0, 0); }
    to { transform: translate(200px, -50px); }
}
@keyframes moveDiagonal_detail_03 {
    from { transform: translate(0, 0); }
    to { transform: translate(50px, 10px); }
}
@keyframes moveDiagonal_detail_04 {
    from { transform: translate(0, 0); }
    to { transform: translate(200px, 70px); }
}
@keyframes moveDiagonal_detail_05 {
    from { transform: translate(0, 0); }
    to { transform: translate(-220px, 220px); }
}
.machinery_detail {
    --machinery_detail-font-size: 0.7rem;
    --machinery_detail-direction_left-padding-left: 35px;
    --machinery_detail-direction_left-padding-right: 5px;
    --machinery_detail-direction_right-padding-left: 5px;
    --machinery_detail-direction_right-padding-right: 35px;
    --machinery_detail_01-top: 154px;
    --machinery_detail_01-left: calc(50% - 127px);
    --machinery_detail_02-top: 645px;
    --machinery_detail_02-right: calc(50% - -100px);
    --machinery_detail_03-top: 435px;
    --machinery_detail_03-left: calc(50% - 183px);
    --machinery_detail_04-top: 41px;
    --machinery_detail_04-right: calc(50% - -66px);
    --machinery_detail_05-top: 334px;
    --machinery_detail_05-left: calc(50% - 304px);
    --machinery_detail_06-top: 990px;
    --machinery_detail_06-right: calc(50% - 139px);
    --machinery_detail_07-top: 751px;
    --machinery_detail_07-right: calc(50% - 344px);
}
@media (width >= 375px)  { /* 375-789 */
    .machinery_detail {
        --machinery_detail-font-size: 0.8rem;
        --machinery_detail-direction_left-padding-left: 38px;
        --machinery_detail-direction_left-padding-right: 5px;
        --machinery_detail-direction_right-padding-left: 5px;
        --machinery_detail-direction_right-padding-right: 38px;
        --machinery_detail_01-top: 258px;
        --machinery_detail_01-left: calc(50% - 148px);
        --machinery_detail_02-top: 753px;
        --machinery_detail_02-right: calc(50% - -132px);
        --machinery_detail_03-top: 471px;
        --machinery_detail_03-left: calc(50% - 210px);
        --machinery_detail_04-top: 10px;
        --machinery_detail_04-right: calc(50% - -126px);
        --machinery_detail_05-top: 344px;
        --machinery_detail_05-left: calc(50% - 343px);
        --machinery_detail_06-top: 1067px;
        --machinery_detail_06-right: calc(50% - 158px);
        --machinery_detail_07-top: 824px;
        --machinery_detail_07-right: calc(50% - 341px);
    }
}
@media (width >= 790px)  { /* 790-999 */
    .machinery_detail {
        --machinery_detail-font-size: 0.9rem;
        --machinery_detail-direction_left-padding-left: 44px;
        --machinery_detail-direction_left-padding-right: 5px;
        --machinery_detail-direction_right-padding-left: 5px;
        --machinery_detail-direction_right-padding-right: 44px;
        --machinery_detail_01-top: 371px;
        --machinery_detail_01-left: calc(50% - 380px);
        --machinery_detail_02-top: 477px;
        --machinery_detail_02-right: calc(50% - 121px);
        --machinery_detail_03-top: 357px;
        --machinery_detail_03-left: calc(50% - 378px);
        --machinery_detail_04-top: 122px;
        --machinery_detail_04-right: calc(50% - 187px);
        --machinery_detail_05-top: 33px;
        --machinery_detail_05-left: calc(50% - 559px);
        --machinery_detail_06-top: 678px;
        --machinery_detail_06-right: calc(50% - 369px);
        --machinery_detail_07-top: 278px;
        --machinery_detail_07-right: calc(50% - 540px);
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .machinery_detail {
        --machinery_detail-font-size: 1.0rem;
        --machinery_detail-direction_left-padding-left: 46px;
        --machinery_detail-direction_left-padding-right: 6px;
        --machinery_detail-direction_right-padding-left: 6px;
        --machinery_detail-direction_right-padding-right: 46px;
        --machinery_detail_01-top: 305px;
        --machinery_detail_01-left: calc(50% - 450px);
        --machinery_detail_02-top: 423px;
        --machinery_detail_02-right: calc(50% - 216px);
        --machinery_detail_03-top: 131px;
        --machinery_detail_03-left: calc(50% - 509px);
        --machinery_detail_04-top: 412px;
        --machinery_detail_04-right: calc(50% - 171px);
        --machinery_detail_05-top: 39px;
        --machinery_detail_05-left: calc(50% - 647px);
        --machinery_detail_06-top: 709px;
        --machinery_detail_06-right: calc(50% - 489px);
        --machinery_detail_07-top: 246px;
        --machinery_detail_07-right: calc(50% - 645px);
    }
}
@media (width >= 1400px) { /* 1400over */
    .machinery_detail {
        --machinery_detail-font-size: 1.1rem;
        --machinery_detail-direction_left-padding-left: 53px;
        --machinery_detail-direction_left-padding-right: 7px;
        --machinery_detail-direction_right-padding-left: 7px;
        --machinery_detail-direction_right-padding-right: 53px;
        --machinery_detail_01-top: 371px;
        --machinery_detail_01-left: calc(50% - 598px);
        --machinery_detail_02-top: 459px;
        --machinery_detail_02-right: calc(50% - 228px);
        --machinery_detail_03-top: 135px;
        --machinery_detail_03-left: calc(50% - 696px);
        --machinery_detail_04-top: 415px;
        --machinery_detail_04-right: calc(50% - 318px);
        --machinery_detail_05-top: 130px;
        --machinery_detail_05-left: calc(50% - 838px);
        --machinery_detail_06-top: 794px;
        --machinery_detail_06-right: calc(50% - 626px);
        --machinery_detail_07-top: 278px;
        --machinery_detail_07-right: calc(50% - 808px);
    }
}


/* machinery_detail_small */
.machinery_detail_small {
    font-size: var(--machinery_detail_small-font-size);
    color: #6b6b6b;
    position: absolute;
    top: var(--machinery_detail_small-top);
    left: var(--machinery_detail_small-left);
    z-index: 1;
    width: var(--machinery_detail_small-width);
    
    --machinery_detail_small-font-size: 0.7rem;
    --machinery_detail_small-top: 759px;
    --machinery_detail_small-left: 22px;
    --machinery_detail_small-width: 80%;
}
@media (width >= 375px)  { /* 375-789 */
    .machinery_detail_small {
        --machinery_detail_small-font-size: 0.8rem;
        --machinery_detail_small-top: 814px;
        --machinery_detail_small-left: 22px;
        --machinery_detail_small-width: 80%;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .machinery_detail_small {
        --machinery_detail_small-font-size: 0.9rem;
        --machinery_detail_small-top: 450px;
        --machinery_detail_small-left: calc(50% - -9px);
        --machinery_detail_small-width: 310px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .machinery_detail_small {
        --machinery_detail_small-font-size: 1.0rem;
        --machinery_detail_small-top: 538px;
        --machinery_detail_small-left: calc(50% - 6px);
        --machinery_detail_small-width: 367px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .machinery_detail_small {
        --machinery_detail_small-font-size: 1.2rem;
        --machinery_detail_small-top: 608px;
        --machinery_detail_small-left: calc(50% - 20px);
        --machinery_detail_small-width: 371px;
    }
}


/* panel_01 */
.panel_01_text {
    position: absolute;
    top: var(--panel-01-text-top);
    right: var(--panel-01-text-right);
    z-index: 3;
    width: var(--panel-01-text-width);
    height: auto;
    
    --panel-01-text-top: 484px; --panel-01-text-right: 20px;
    --panel-01-text-width: calc(100% - 40px);
}
.panel_01_image {
    position: absolute;
    top: var(--panel-01-image-top);
    left: var(--panel-01-image-left);
    z-index: 2;
    width: var(--panel-01-image-width);
    height: var(--panel-01-image-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(image/base/heavy_machinery_01.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: zoom_slide_01 linear both;
    animation-timeline: view();
    animation-range: cover 20% cover 60%;

    --panel-01-image-top: -11px; --panel-01-image-left: calc(50% - 169px);
    --panel-01-image-width: 272px; --panel-01-image-height: 399px;
}
@keyframes zoom_slide_01 {
    0% {
        transform: translateX(0) scale(0.9);
    }
    100% {
        transform: translateX(50px) scale(1.0);
    }
}
.staff_01_image {
    position: absolute;
    top: var(--staff-01-image-top);
    left: var(--staff-01-image-left);
    z-index: 3;
    width: var(--staff-01-image-width);
    height: var(--staff-01-image-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(image/base/staff_01.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: zoom_slide_02 linear both;
    animation-timeline: view();
    animation-range: cover 20% cover 60%;

    --staff-01-image-top: 377px; --staff-01-image-left: calc(50% - 202px);
    --staff-01-image-width: 48px; --staff-01-image-height: 107px;
}
@keyframes zoom_slide_02 {
    0% {
        transform: translateX(0) scale(0.9);
    }
    100% {
        transform: translateX(50px) scale(1.0);
    }
}
@media (width >= 375px)  { /* 375-789 */
    .panel_01_text {
        --panel-01-text-top: 555px; --panel-01-text-right: 20px;
        --panel-01-text-width: calc(100% - 40px);
    }
    .panel_01_image {
        --panel-01-image-top: 20px; --panel-01-image-left: calc(50% - 170px);
        --panel-01-image-width: 315px; --panel-01-image-height: 462px;
    }
    .staff_01_image {
        --staff-01-image-top: 433px; --staff-01-image-left: calc(50% - 202px);
        --staff-01-image-width: 56px; --staff-01-image-height: 122px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .panel_01_text {
        --panel-01-text-top: 150px; --panel-01-text-right: 20px;
        --panel-01-text-width: 370px;
    }
    .panel_01_image {
        --panel-01-image-top: 30px; --panel-01-image-left: calc(50% - 383px);
        --panel-01-image-width: 419px; --panel-01-image-height: 607px;
    }
    .staff_01_image {
        --staff-01-image-top: 557px; --staff-01-image-left: calc(50% - 402px);
        --staff-01-image-width: 73px; --staff-01-image-height: 161px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .panel_01_text {
        --panel-01-text-top: 150px; --panel-01-text-right: calc(50% - 500px);
        --panel-01-text-width: 506px;
    }
    .panel_01_image {
        --panel-01-image-top: -63px; --panel-01-image-left: calc(50% - 520px);
        --panel-01-image-width: 523px; --panel-01-image-height: 766px;
    }
    .staff_01_image {
        --staff-01-image-top: 615px; --staff-01-image-left: calc(50% - 548px);
        --staff-01-image-width: 81px; --staff-01-image-height: 178px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .panel_01_text {
        --panel-01-text-top: 88px; --panel-01-text-right: calc(50% - 700px);
        --panel-01-text-width: 654px;
    }
    .panel_01_image {
        --panel-01-image-top: -46px; --panel-01-image-left: calc(50% - 621px);
        --panel-01-image-width: 523px; --panel-01-image-height: 766px;
    }
    .staff_01_image {
        --staff-01-image-top: 597px; --staff-01-image-left: calc(50% - 696px);
        --staff-01-image-width: 92px; --staff-01-image-height: 199px;
    }
}


/* panel_02 */
.panel_02_text {
    position: absolute;
    top: var(--panel-02-text-top);
    left: var(--panel-02-text-left);
    width: var(--panel-02-text-width);
    height: auto;
    #group {
        overflow: hidden;
        padding-left: 0;
        border-bottom: solid 3px #00bbb6;
        li {
            float: left;
            width: var(--panel-02-text-li-width);
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            a {
                text-align: center;
                text-decoration: none;
                color: #E7383B;
                display: block;
                width: 100%;
                height: auto;
                &:hover {
                    color: #f60;
                }
            }
            span {
                font-size: var(--panel-02-text-font-size);
                display: block;
                padding-top: var(--panel-02-text-font-padding-top);
            }
            .group_image {
                background-color: #b8a5a5;
                width: 100%;
                height: var(--panel-02-group-image-height);
                background-size: cover;
                background-position: top center;
                background-repeat: no-repeat;
                position: relative;
                border-radius: 5px;
                small {
                    font-size: var(--panel-02-group-image-font-size);
                    color: #fff;
                    background-color: rgb(23 107 107 / 78%);
                    text-align: center;
                    display: block;
                    width: 100%;
                    padding-top: var(--panel-02-group-image-padding-top);
                    padding-bottom: var(--panel-02-group-image-padding-bottom);
                    position: absolute;
                    bottom: 0;
                    left: auto;
                    right: auto;
                    border-bottom-left-radius: 5px;
                    border-bottom-right-radius: 5px;
                }
            }
            .group_image_01 { background-image: url(image/base/external_link_gb_01.webp); }
            .group_image_02 { background-image: url(image/base/external_link_gb_02.webp); }
            .group_image_03 { background-image: url(image/base/external_link_gb_03.webp); }
            .group_image_04 { background-image: url(image/base/external_link_gb_04.webp); }
        }
    }
    #sns {
        clear: both;
        overflow: hidden;
        padding-top: var(--panel-02-sns-padding-top);
        padding-left: var(--panel-02-sns-padding-left);
        width: var(--panel-02-sns-width);
        li {
            float: left;
            width: var(--panel-02-sns-li-width);
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            a {
                text-align: center;
                text-decoration: none;
                display: block;
                width: 100%;
                height: auto;
                &:hover {
                    color: #f60;
                }
            }
            span {
                font-size: var(--panel-02-sns-span-font-size);
                display: block;
                padding-top: var(--panel-02-sns-span-padding-top);
            }
            small {
                font-size: var(--panel-02-sns-small-font-size);
                line-height: 1.2;
                display: block;
                padding-top: var(--panel-02-sns-small-padding-top);
            }
        }
        .youtube { color: #d31c1c; }
        .facebook { color: #3a5bb5; }
        .instagram { color: #B42B91; }
        .line { color: #0d8117; }
    }
}
.panel_02_text {
    --panel-02-text-top: 20px;
    --panel-02-text-left: 20px;
    --panel-02-text-width: calc(100% - 40px);
    --panel-02-text-li-width: calc(100% / 2 - 20px);
    --panel-02-text-font-size: 2.6rem;
    --panel-02-text-font-padding-top: 8px;
    --panel-02-group-image-height: 100px;
    --panel-02-group-image-font-size: 0.8rem;
    --panel-02-group-image-padding-top: 3px;
    --panel-02-group-image-padding-bottom: 3px;
    --panel-02-sns-padding-top: 6px;
    --panel-02-sns-padding-left: 0;
    --panel-02-sns-width: 100%;
    --panel-02-sns-li-width: calc(100% / 4 - 20px);
    --panel-02-sns-span-font-size: 1.5rem;
    --panel-02-sns-span-padding-top: 6px;
    --panel-02-sns-small-font-size: 0.8rem;
    --panel-02-sns-small-padding-top: 2px;
}
@media (width >= 375px)  { /* 375-789 */
    .panel_02_text {
        --panel-02-text-top: 30px;
        --panel-02-text-left: 20px;
        --panel-02-text-width: calc(100% - 40px);
        --panel-02-text-li-width: calc(100% / 2 - 20px);
        --panel-02-text-font-size: 3.2rem;
        --panel-02-text-font-padding-top: 10px;
        --panel-02-group-image-height: 120px;
        --panel-02-group-image-font-size: 0.9rem;
        --panel-02-group-image-padding-top: 4px;
        --panel-02-group-image-padding-bottom: 4px;
        --panel-02-sns-padding-top: 8px;
        --panel-02-sns-padding-left: 0;
        --panel-02-sns-width: 100%;
        --panel-02-sns-li-width: calc(100% / 4 - 20px);
        --panel-02-sns-span-font-size: 1.6rem;
        --panel-02-sns-span-padding-top: 8px;
        --panel-02-sns-small-font-size: 0.9rem;
        --panel-02-sns-small-padding-top: 2px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .panel_02_text {
        --panel-02-text-top: 20px;
        --panel-02-text-left: 20px;
        --panel-02-text-width: 437px;
        --panel-02-text-li-width: calc(100% / 2 - 20px);
        --panel-02-text-font-size: 3.5rem;
        --panel-02-text-font-padding-top: 10px;
        --panel-02-group-image-height: 102px;
        --panel-02-group-image-font-size: 1.1rem;
        --panel-02-group-image-padding-top: 4px;
        --panel-02-group-image-padding-bottom: 4px;
        --panel-02-sns-padding-top: 8px;
        --panel-02-sns-padding-left: 0;
        --panel-02-sns-width: 100%;
        --panel-02-sns-li-width: calc(100% / 4 - 20px);
        --panel-02-sns-span-font-size: 1.7rem;
        --panel-02-sns-span-padding-top: 10px;
        --panel-02-sns-small-font-size: 1.0rem;
        --panel-02-sns-small-padding-top: 3px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .panel_02_text {
        --panel-02-text-top: 40px;
        --panel-02-text-left: calc(50% - 500px);
        --panel-02-text-width: 730px;
        --panel-02-text-li-width: calc(100% / 4 - 20px);
        --panel-02-text-font-size: 3.6rem;
        --panel-02-text-font-padding-top: 10px;
        --panel-02-group-image-height: 151px;
        --panel-02-group-image-font-size: 1.2rem;
        --panel-02-group-image-padding-top: 4px;
        --panel-02-group-image-padding-bottom: 4px;
        --panel-02-sns-padding-top: 10px;
        --panel-02-sns-padding-left: 0;
        --panel-02-sns-width: 400px;
        --panel-02-sns-li-width: calc(100% / 4 - 20px);
        --panel-02-sns-span-font-size: 1.9rem;
        --panel-02-sns-span-padding-top: 10px;
        --panel-02-sns-small-font-size: 1.1rem;
        --panel-02-sns-small-padding-top: 4px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .panel_02_text {
        --panel-02-text-top: 40px;
        --panel-02-text-left: calc(50% - 700px);
        --panel-02-text-width: 790px;
        --panel-02-text-li-width: calc(100% / 4 - 20px);
        --panel-02-text-font-size: 3.8rem;
        --panel-02-text-font-padding-top: 12px;
        --panel-02-group-image-height: 172px;
        --panel-02-group-image-font-size: 1.3rem;
        --panel-02-group-image-padding-top: 5px;
        --panel-02-group-image-padding-bottom: 5px;
        --panel-02-sns-padding-top: 10px;
        --panel-02-sns-padding-left: 0;
        --panel-02-sns-width: 500px;
        --panel-02-sns-li-width: calc(100% / 4 - 20px);
        --panel-02-sns-span-font-size: 2.0rem;
        --panel-02-sns-span-padding-top: 10px;
        --panel-02-sns-small-font-size: 1.2rem;
        --panel-02-sns-small-padding-top: 4px;
    }
}


/* panel_02_image */
.panel_02_image {
    position: absolute;
    top: var(--panel-02-image-top);
    right: var(--panel-02-image-right);
    z-index: 2;
    width: var(--panel-02-image-width);
    height: var(--panel-02-image-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(image/base/heavy_machinery_02.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: moveDiagonal_02 linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}
@keyframes moveDiagonal_02 {
    from { transform: translate(0, 0); }
    to { transform: translate(300px, -50px); }
}
.panel_02_image {
    --panel-02-image-top: 534px; --panel-02-image-right: calc(50% - -36px);
    --panel-02-image-width: 113px; --panel-02-image-height: 211px;
}
@media (width >= 375px)  { /* 375-789 */
    .panel_02_image {
        --panel-02-image-top: 643px; --panel-02-image-right: calc(50% - -30px);
        --panel-02-image-width: 132px; --panel-02-image-height: 244px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .panel_02_image {
        --panel-02-image-top: 227px; --panel-02-image-right: calc(50% - 240px);
        --panel-02-image-width: 195px; --panel-02-image-height: 360px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .panel_02_image {
        --panel-02-image-top: 129px; --panel-02-image-right: calc(50% - 376px);
        --panel-02-image-width: 234px; --panel-02-image-height: 432px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .panel_02_image {
        --panel-02-image-top: 89px; --panel-02-image-right: calc(50% - 414px);
        --panel-02-image-width: 278px; --panel-02-image-height: 513px;
    }
}


/* promotion */
.promotion {
    width: var(--promotion-width);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--promotion-margin-top);
    text-align: center;
    button {
        border: none;
        position: relative;
        background: none;
        &:hover {
            opacity: 0.8;
            translate: 1px 1px;
        }
    }
    img {
        width: 100%;
        height: auto;
        border: solid 3px #51a1a5;
        border-radius: 10px;
        overflow: hidden;
    }
    span {
        font-size: var(--promotion-span-font-size);
        color: #d31c1c;
        position: absolute;
        top: var(--promotion-span-top);
        z-index: 2;
        width: 100%;
        display: block;
        text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff;
        &:hover {
            color: #f60;
        }
    }
    small {
        font-size: var(--promotion-small-font-size);
        padding-top: var(--promotion-small-padding-top);
        display: block;
    }
}
.promotion {
    --promotion-width: 178px;
    --promotion-margin-top: 11px;
    --promotion-span-font-size: 2.0rem;
    --promotion-span-top: 37px;
    --promotion-small-font-size: 0.8rem;
    --promotion-small-padding-top: 1px;
}
@media (width >= 375px)  { /* 375-789 */
    .promotion {
        --promotion-width: 190px;
        --promotion-margin-top: 12px;
        --promotion-span-font-size: 2.2rem;
        --promotion-span-top: 39px;
        --promotion-small-font-size: 0.9rem;
        --promotion-small-padding-top: 2px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .promotion {
        --promotion-width: 225px;
        --promotion-margin-top: 16px;
        --promotion-span-font-size: 2.6rem;
        --promotion-span-top: 49px;
        --promotion-small-font-size: 1.1rem;
        --promotion-small-padding-top: 3px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .promotion {
        --promotion-width: 300px;
        --promotion-margin-top: 22px;
        --promotion-span-font-size: 2.8rem;
        --promotion-span-top: 67px;
        --promotion-small-font-size: 1.3rem;
        --promotion-small-padding-top: 4px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .promotion {
        --promotion-width: 344px;
        --promotion-margin-top: 30px;
        --promotion-span-font-size: 3.0rem;
        --promotion-span-top: 80px;
        --promotion-small-font-size: 1.4rem;
        --promotion-small-padding-top: 6px;
    }
}


/* news_area */
.news_area {
    width: var(--news-area-width);
    overflow: hidden;
    margin-left: var(--news-area-margin-left);
    margin-right: var(--news-area-margin-right);
    margin-bottom: var(--news-area-margin-bottom);
    h1 {
        font-size: var(--news-area-h1-font-size);
        text-align: center;
        padding-top: var(--news-area-h1-padding-top);
        padding-bottom: var(--news-area-h1-padding-bottom);
    }
    .news_l {
        float: left;
        width: var(--news-area-news-l-width);
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        .news_image {
            width: 100%;
            height: auto;
            img {
                width: 100%;
                height: var(--news-area-news-l-image-height);
                object-fit: cover;
                object-position: center center;
                vertical-align:top;
                overflow: hidden;
                border: solid 1px #cbcaca;
                border-radius: 5px;
            }
        }
    }
    .news_s {
        float: left;
        width: var(--news-area-news-s-width);
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 20px;
        position: relative;
        .news_image {
            width: 100%;
            height: auto;
            img {
                width: 100%;
                height: var(--news-area-news-s-image-height);
                object-fit: cover;
                object-position: center center;
                vertical-align:top;
                overflow: hidden;
                border: solid 1px #cbcaca;
                border-radius: 5px;
            }
        }
    }
    time {
        font-size: var(--news-area-time-font-size);
        color: #333;
        display: block;
        clear: both;
        padding-top: var(--news-area-time-padding-top);
    }
    h2 {
        font-size: var(--news-area-h2-font-size);
    }
    a {
        font-weight: normal;
        color: #000;
        text-decoration: none;
        display: block;
        &:hover {
            color: #f60;
        }
    }
    .cat_icon {
        font-size: var(--news-area-cat-icon-font-size);
        text-align: center;
        width: var(--news-area-cat-icon-width);
        padding-top: 2px;
        padding-bottom: 2px;
        position: absolute;
        top: 0px;
        right: -5px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
        &.cat_icon_a {
            color: #fff;
            background-color: #654088;
        }
        &.cat_icon_b {
            color: #fff;
            background-color: #3a7f89;
        }
        &.cat_icon_c {
            color: #fff;
            background-color: #886540;
        }
        &.cat_icon_d {
            color: #fff;
            background-color: #ac4323;
        }
    }
    .news_left {
        overflow: hidden;
        float: var(--news-left-float);
        width: var(--news-left-width);
        padding-bottom: 30px;
    }
    .news_right {
        overflow: hidden;
        float: var(--news-right-float);
        width: var(--news-right-width);
    }
}
.news_area {
    --news-area-width: calc(100% - 20px); --news-area-margin-left: 10px; --news-area-margin-right: 10px; --news-area-margin-bottom: 20px;
    --news-area-h1-font-size: 1.4rem; --news-area-h1-padding-top: 59px; --news-area-h1-padding-bottom: 17px;
    --news-area-news-l-width: calc(100% / 1 - 20px); --news-area-news-l-image-height: 210px;
    --news-area-news-s-width: calc(100% / 2 - 20px); --news-area-news-s-image-height: 120px;
    --news-area-time-font-size: 0.8rem; --news-area-time-padding-top: 5px;
    --news-area-h2-font-size: 0.9rem;
    --news-area-cat-icon-font-size: 0.7rem; --news-area-cat-icon-width: 72px;
}
.subpage .news_area {
    --news-area-news-s-width: calc(100% / 2 - 20px); 
}
.news_left { --news-left-float: none; --news-left-width: 100%;}
.news_right { --news-right-float: none; --news-right-width: 100%; }
@media (width >= 375px)  { /* 375-789 */
    .news_area {
        --news-area-width: calc(100% - 20px); --news-area-margin-left: 10px; --news-area-margin-right: 10px; --news-area-margin-bottom: 30px;
        --news-area-h1-font-size: 1.6rem; --news-area-h1-padding-top: 53px; --news-area-h1-padding-bottom: 32px;
        --news-area-news-l-width: calc(100% / 2 - 20px); --news-area-news-l-image-height: 228px;
        --news-area-news-s-width: calc(100% / 2 - 20px); --news-area-news-s-image-height: 122px;
        --news-area-time-font-size: 0.9rem; --news-area-time-padding-top: 5px;
        --news-area-h2-font-size: 1.0rem;
        --news-area-cat-icon-font-size: 0.8rem; --news-area-cat-icon-width: 84px;
    }
    .subpage .news_area {
        --news-area-news-s-width: calc(100% / 2 - 20px); 
    }
    .news_left { --news-left-float: none; --news-left-width: 100%; }
    .news_right { --news-right-float: none; --news-right-width: 100%; }
    }
@media (width >= 790px)  { /* 790-999 */
    .news_area {
        --news-area-width: calc(100% - 20px); --news-area-margin-left: 10px; --news-area-margin-right: 10px; --news-area-margin-bottom: 30px;
        --news-area-h1-font-size: 1.9rem; --news-area-h1-padding-top: 58px; --news-area-h1-padding-bottom: 32px;
        --news-area-news-l-width: calc(100% / 2 - 20px); --news-area-news-l-image-height: 228px;
        --news-area-news-s-width: calc(100% / 4 - 20px); --news-area-news-s-image-height: 122px;
        --news-area-time-font-size: 1.0rem; --news-area-time-padding-top: 5px;
        --news-area-h2-font-size: 1.1rem;
        --news-area-cat-icon-font-size: 0.9rem; --news-area-cat-icon-width: 88px;
    }
    .subpage .news_area {
        --news-area-news-s-width: calc(100% / 3 - 20px); 
    }
    .news_left { --news-left-float: none; --news-left-width: 100%; }
    .news_right { --news-right-float: none; --news-right-width: 100%; }
}
@media (width >= 1000px) { /* 1000-1400 */
    .news_area {
        --news-area-width: 1000px; --news-area-margin-left: auto; --news-area-margin-right: auto; --news-area-margin-bottom: 35px;
        --news-area-h1-font-size: 2.4rem; --news-area-h1-padding-top: 42px; --news-area-h1-padding-bottom: 49px;
        --news-area-news-l-width: calc(100% / 2 - 20px); --news-area-news-l-image-height: 328px;
        --news-area-news-s-width: calc(100% / 2 - 20px); --news-area-news-s-image-height: 122px;
        --news-area-time-font-size: 1.1rem; --news-area-time-padding-top: 5px;
        --news-area-h2-font-size: 1.2rem;
        --news-area-cat-icon-font-size: 1.0rem; --news-area-cat-icon-width: 94px;
    }
    .subpage .news_area {
        --news-area-news-s-width: calc(100% / 4 - 20px); 
    }
    .news_left { --news-left-float: left; --news-left-width: calc(100% - 400px); }
    .news_right { --news-right-float: left; --news-right-width: 400px; }
}
@media (width >= 1400px) { /* 1400over */
    .news_area {
        --news-area-width: 1400px; --news-area-margin-left: auto; --news-area-margin-right: auto; --news-area-margin-bottom: 40px;
        --news-area-h1-font-size: 3.0rem; --news-area-h1-padding-top: 42px; --news-area-h1-padding-bottom: 49px;
        --news-area-news-l-width: calc(100% / 2 - 20px); --news-area-news-l-image-height: 477px;
        --news-area-news-s-width: calc(100% / 2 - 20px); --news-area-news-s-image-height: 192px;
        --news-area-time-font-size: 1.2rem; --news-area-time-padding-top: 5px;
        --news-area-h2-font-size: 1.3rem;
        --news-area-cat-icon-font-size: 1.1rem; --news-area-cat-icon-width: 98px;
    }
    .subpage .news_area {
        --news-area-news-s-width: calc(100% / 4 - 20px); 
    }
    .news_left { --news-left-float: left; --news-left-width: calc(100% - 700px); }
    .news_right { --news-right-float: left; --news-right-width: 700px; }
}


/* panel_03 - panel_05 */
.panel_03_text {
    position: absolute;
    top: 78px;
    left: calc(50% - 4px);
    right: 30px;
    width: auto;
    height: auto;
}
.panel_04_text {
    position: absolute;
    top: 19px;
    left: 20px;
    width: calc(100% - 40px);
    height: auto;
}
.panel_05_text {
    position: absolute;
    top: 804px;
    left: 20px;
    width: calc(100% - 40px);
    height: auto;
}
.panel_03a_image {
    position: absolute;
    top: 367px;
    left: calc(50% - 226px);
    z-index: 3;
    width: 316px;
    height: 323px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(image/base/heavy_machinery_03.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: moveDiagonal_03a linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}
@keyframes moveDiagonal_03a {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(100px, 10px);
    }
}
.panel_03b_image {
    position: absolute;
    top: 28px;
    right: calc(50% - -67px);
    z-index: 2;
    width: 229px;
    height: 361px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(image/base/heavy_machinery_04.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: moveDiagonal_03b linear both;
    animation-timeline: view();
    animation-range: cover 10% cover 40%;
}
@keyframes moveDiagonal_03b {
    from {
        transform: translateX(0) scale(0.6);
    }
    to {
        transform: translateX(100px) scale(1.0);
    }
}
.panel_04a_image {
    position: absolute;
    top: 304px;
    left: calc(50% - 362px);
    z-index: 3;
    width: 229px;
    height: 372px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(image/base/heavy_machinery_05.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: moveDiagonal_04a linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}
@keyframes moveDiagonal_04a {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(300px, 70px);
    }
}
.panel_04b_image {
    position: absolute;
    top: 362px;
    left: calc(50% - 86px);
    z-index: 2;
    width: 173px;
    height: 282px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(image/base/heavy_machinery_05.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: moveDiagonal_04b linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}
@keyframes moveDiagonal_04b {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(100px, 60px);
    }
}
.panel_05_image {
    position: absolute;
    top: 948px;
    right: calc(50% - 7px);
    z-index: 2;
    width: 155px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(image/base/heavy_machinery_06.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: zoom_slide_03 linear both;
    animation-timeline: view();
    animation-range: cover 10% cover 40%;
}
@keyframes zoom_slide_03 {
    0% {
        transform: translateX(0) scale(0.6);
    }
    100% {
        transform: translateX(100px) scale(1.0);
    }
}
.panel_06_image {
    position: absolute;
    top: 655px;
    right: calc(50% - 322px);
    z-index: 2;
    width: 238px;
    height: 292px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(image/base/heavy_machinery_07.webp);
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: moveDiagonal_06 linear both;
    animation-timeline: view();
    animation-range: entry 10% exit 50%;
}
@keyframes moveDiagonal_06 {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-200px, 300px);
    }
}
@media (width >= 375px)  { /* 375-789 */
    .panel_03_text {
        top: 50px;
        left: calc(50% - -13px);
        width: auto;
        right: 30px;
    }
    .panel_04_text {
        top: 24px;
        left: 20px;
        width: calc(100% - 40px);
    }
    .panel_05_text {
        top: 863px;
        left: 20px;
        width: calc(100% - 40px);
    }
    .panel_03a_image {
        top: 312px;
        left: calc(50% - 168px);
        width: 337px;
        height: 345px;
    }
    .panel_03b_image {
        top: -28px;
        right: calc(50% - -50px);
        width: 262px;
        height: 411px;
    }
    .panel_04a_image {
        top: 309px;
        left: calc(50% - 372px);
        width: 251px;
        height: 408px;
    }
    .panel_04b_image {
        top: 361px;
        left: calc(50% - 93px);
        width: 199px;
        height: 324px;
    }
    .panel_05_image {
        top: 994px;
        right: calc(50% - 16px);
        width: 178px;
        height: 285px;
    }
    .panel_06_image {
        top: 828px;
        right: calc(50% - 335px);
        width: 271px;
        height: 328px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .panel_03_text {
        top: 15px;
        left: calc(50% - 361px);
        width: 328px;
    }
    .panel_04_text {
        top: 86px;
        left: calc(50% - 0px);
        width: 365px;
    }
    .panel_05_text {
        top: 687px;
        left: calc(50% - 288px);
        width: 340px;
    }
    .panel_03a_image {
        top: 219px;
        left: calc(50% - 430px);
        width: 494px;
        height: 501px;
    }
    .panel_03b_image {
        top: -60px;
        right: calc(50% - 310px);
        width: 366px;
        height: 565px;
    }
    .panel_04a_image {
        top: -3px;
        left: calc(50% - 639px);
        width: 334px;
        height: 539px;
    }
    .panel_04b_image {
        top: 61px;
        left: calc(50% - 342px);
        width: 258px;
        height: 419px;
    }
    .panel_05_image {
        top: 553px;
        right: calc(50% - 252px);
        width: 268px;
        height: 429px;
    }
    .panel_06_image {
        top: 176px;
        right: calc(50% - 515px);
        width: 333px;
        height: 408px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .panel_03_text {
        top: 32px;
        left: calc(50% - 73px);
        width: 366px;
    }
    .panel_04_text {
        top: 107px;
        left: calc(50% - 3px);
        width: 465px;
    }
    .panel_05_text {
        top: 789px;
        left: calc(50% - 353px);
        width: 461px;
    }
    .panel_03a_image {
        top: 39px;
        left: calc(50% - 682px);
        width: 578px;
        height: 583px;
    }
    .panel_03b_image {
        top: -57px;
        right: calc(50% - 465px);
        width: 389px;
        height: 608px;
    }
    .panel_04a_image {
        top: 1px;
        left: calc(50% - 770px);
        width: 412px;
        height: 664px;
    }
    .panel_04b_image {
        top: 73px;
        left: calc(50% - 417px);
        width: 323px;
        height: 521px;
    }
    .panel_05_image {
        top: 549px;
        right: calc(50% - 393px);
        width: 326px;
        height: 527px;
    }
    .panel_06_image {
        top: 138px;
        right: calc(50% - 643px);
        width: 398px;
        height: 482px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .panel_03_text {
        top: 40px;
        left: calc(50% - 100px);
        width: 516px;
    }
    .panel_04_text {
        top: 147px;
        left: calc(50% - 27px);
        width: 590px;
    }
    .panel_05_text {
        top: 890px;
        left: calc(50% - 410px);
        width: 516px;
    }
    .panel_03a_image {
        top: -4px;
        left: calc(50% - 817px);
        width: 638px;
        height: 651px;
    }
    .panel_03b_image {
        top: -96px;
        right: calc(50% - 642px);
        width: 422px;
        height: 656px;
    }
    .panel_04a_image {
        top: -4px;
        left: calc(50% - 918px);
        width: 460px;
        height: 744px;
    }
    .panel_04b_image {
        top: 141px;
        left: calc(50% - 480px);
        width: 328px;
        height: 529px;
    }
    .panel_05_image {
        top: 592px;
        right: calc(50% - 534px);
        width: 366px;
        height: 583px;
    }
    .panel_06_image {
        top: 120px;
        right: calc(50% - 805px);
        width: 440px;
        height: 541px;
    }
}


/* ground_bg */
.ground_bg_01 {
    position: absolute;
    top: 336px;
    left: calc(50% - 681px);
    right: auto;
    z-index: -1;
    width: 893px;
    height: 99px;
    background-image: url(image/base/ground_a.svg);
    background-position: 0 top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.ground_bg_02 {
    position: absolute;
    top: 657px;
    left: auto;
    right: calc(50% - 574px);
    z-index: 1;
    width: 717px;
    height: 87px;
    background-image: url(image/base/ground_b.svg);
    background-position: 0 top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.ground_bg_03a {
    position: absolute;
    top: 337px;
    left: auto;
    right: calc(50% - 228px);
    z-index: -1;
    width: 894px;
    height: 79px;
    background-image: url(image/base/ground_c1.svg);
    background-position: 0 top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.ground_bg_03b {
    position: absolute;
    top: 599px;
    left: auto;
    right: calc(50% - 397px);
    z-index: -1;
    width: 873px;
    height: 126px;
    background-image: url(image/base/ground_c2.svg);
    background-position: 0 top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.ground_bg_04 {
    position: absolute;
    top: 604px;
    left: calc(50% - 564px);
    right: auto;
    z-index: -1;
    width: 955px;
    height: 148px;
    background-image: url(image/base/ground_d.svg);
    background-position: 0 top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.ground_bg_05 {
    position: absolute;
    top: 1068px;
    left: auto;
    right: calc(50% - 345px);
    z-index: -1;
    width: 534px;
    height: 205px;
    background-image: url(image/base/ground_e.svg);
    background-position: 0 top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.ground_bg_06 {
    position: absolute;
    left: auto;
    bottom: 0;
    right: calc(50% - 645px);
    z-index: -1;
    width: 1691px;
    height: 954px;
    background-image: url(image/base/ground_f.svg);
    background-position: 0 top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.first_block_bg {
    position: absolute;
    top: 57px;
    left: calc(50% - 250px);
    right: 0;
    z-index: -3;
    width: 500px;
    height: 297px;
    background-image: url(image/base/first_block_bg.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
@media (width >= 375px)  { /* 375-789 */
    .ground_bg_01 {
        top: 407px;
        left: calc(50% - 450px);
        width: 1018px;
        height: 115px;
    }
    .ground_bg_02 {
        top: 798px;
        right: calc(50% - 605px);
        width: 806px;
        height: 87px;
    }
    .ground_bg_03a {
        top: 329px;
        right: calc(50% - 317px);
        width: 939px;
        height: 84px;
    }
    .ground_bg_03b {
        top: 569px;
        right: calc(50% - 622px);
        width: 955px;
        height: 134px;
    }
    .ground_bg_04 {
        top: 640px;
        left: calc(50% - 635px);
        width: 1155px;
        height: 171px;
    }
    .ground_bg_05 {
        top: 1073px;
        right: calc(50% - 552px);
        width: 816px;
        height: 317px;
    }
    .ground_bg_06 {
        right: calc(50% - 812px);
        width: 1908px;
        height: 954px;
    }
    .first_block_bg {
        top: 96px;
        left: calc(50% - 400px);
        width: 800px;
        height: 335px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .ground_bg_01 {
        top: 505px;
        left: calc(50% - 1027px);
        width: 1537px;
        height: 172px;
    }
    .ground_bg_02 {
        top: 501px;
        right: calc(50% - 806px);
        width: 903px;
        height: 96px;
    }
    .ground_bg_03a {
        top: 664px;
        right: calc(50% - 308px);
        width: 1022px;
        height: 92px;
    }
    .ground_bg_03b {
        top: 430px;
        right: calc(50% - 681px);
        width: 981px;
        height: 140px;
    }
    .ground_bg_04 {
        top: 450px;
        left: calc(50% - 862px);
        width: 1210px;
        height: 181px;
    }
    .ground_bg_05 {
        top: 798px;
        right: calc(50% - 648px);
        width: 756px;
        height: 290px;
    }
    .ground_bg_06 {
        right: calc(50% - 979px);
        width: 2190px;
        height: 957px;
    }
    .first_block_bg {
        top: 123px;
        left: calc(50% - 500px);
        width: 1000px;
        height: 396px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .ground_bg_01 {
        top: 547px;
        left: calc(50% - 1037px);
        width: 1658px;
        height: 189px;
    }
    .ground_bg_02 {
        top: 443px;
        right: calc(50% - 1232px);
        width: 1150px;
        height: 123px;
    }
    .ground_bg_03a {
        top: 562px;
        right: calc(50% - 145px);
        width: 1140px;
        height: 106px;
    }
    .ground_bg_03b {
        top: 453px;
        right: calc(50% - 873px);
        width: 981px;
        height: 142px;
    }
    .ground_bg_04 {
        top: 546px;
        left: calc(50% - 1019px);
        width: 1466px;
        height: 220px;
    }
    .ground_bg_05 {
        top: 827px;
        right: calc(50% - 835px);
        width: 952px;
        height: 369px;
    }
    .ground_bg_06 {
        right: calc(50% - 1145px);
        width: 2248px;
        height: 908px;
    }
    .first_block_bg {
        top: 74px;
        left: calc(50% - 800px);
        width: 1600px;
        height: 465px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .ground_bg_01 {
        top: 574px;
        left: calc(50% - 1223px);
        width: 1741px;
        height: 202px;
    }
    .ground_bg_02 {
        top: 472px;
        right: calc(50% - 1389px);
        width: 1298px;
        height: 139px;
    }
    .ground_bg_03a {
        top: 565px;
        right: calc(50% - 187px);
        width: 1320px;
        height: 154px;
    }
    .ground_bg_03b {
        top: 433px;
        right: calc(50% - 1239px);
        width: 1247px;
        height: 190px;
    }
    .ground_bg_04 {
        top: 618px;
        left: calc(50% - 1056px);
        width: 1706px;
        height: 252px;
    }
    .ground_bg_05 {
        top: 884px;
        right: calc(50% - 1108px);
        width: 1206px;
        height: 495px;
    }
    .ground_bg_06 {
        right: calc(50% - 1408px);
        width: 2486px;
        height: 970px;
    }
    .first_block_bg {
        top: 31px;
        left: calc(50% - 1000px);
        width: 2000px;
        height: 515px;
    }
}


/* wall */
.wall_a {
    position: absolute;
    top: 314px;
    left: calc(50% - 300px);
    right: 0;
    z-index: -2;
    width: 600px;
    height: 52px;
    background-image: url(image/base/wall_a.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
.wall_b {
    position: absolute;
    top: 311px;
    left: calc(50% - 300px);
    right: 0;
    z-index: -2;
    width: 600px;
    height: 127px;
    background-image: url(image/base/wall_b.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
.wall_c {
    position: absolute;
    top: 449px;
    left: calc(50% - 300px);
    right: 0;
    z-index: -2;
    width: 600px;
    height: 136px;
    background-image: url(image/base/wall_c.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
@media (width >= 375px)  { /* 375-789 */
    .wall_a {
        top: 378px;
        left: calc(50% - 400px);
        width: 800px;
        height: 63px;
    }
    .wall_b {
        top: 303px;
        left: calc(50% - 400px);
        width: 800px;
        height: 157px;
    }
    .wall_c {
        top: 514px;
        left: calc(50% - 400px);
        width: 800px;
        height: 136px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .wall_a {
        top: 457px;
        left: calc(50% - 750px);
        width: 1500px;
        height: 72px;
    }
    .wall_b {
        top: 341px;
        left: calc(50% - 750px);
        width: 1500px;
        height: 157px;
    }
    .wall_c {
        top: 389px;
        left: calc(50% - 750px);
        width: 1500px;
        height: 136px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .wall_a {
        top: 478px;
        left: calc(50% - 1000px);
        width: 2000px;
        height: 109px;
    }
    .wall_b {
        top: 341px;
        left: calc(50% - 1000px);
        width: 2000px;
        height: 157px;
    }
    .wall_c {
        top: 422px;
        left: calc(50% - 1000px);
        width: 2000px;
        height: 136px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .wall_a {
        top: 463px;
        left: calc(50% - 1500px);
        width: 3000px;
        height: 184px;
    }
    .wall_b {
        top: 325px;
        left: calc(50% - 1500px);
        width: 3000px;
        height: 157px;
    }
    .wall_c {
        top: 476px;
        left: calc(50% - 1500px);
        width: 3000px;
        height: 136px;
    }
}


/* company_area */
#company_area_spc {
    width: var(--company-area-spc-width);
    margin-left: var(--company-area-spc-left);
    margin-right: var(--company-area-spc-right);
    padding-top: 100px;
    padding-bottom: var(--company-area-spc-padding-bottom);
    overflow: hidden;
    #company_area {
        float: var(--company-area-float);
        overflow: hidden;
        width: var(--company-area-width);
        padding-bottom: 30px;
        .company_name {
            overflow: hidden;
            a {
                text-decoration: none;
                display: block;
            }
            span {
                display: block;
                &:hover {
                    color: #f60;
                }
            }
            .icon-logo_a {
                text-align: var(--company-area-icon-logo-a-align);
                color: #E7383B;
                font-size: var(--company-area-icon-logo-a-font-size);
                float: var(--company-area-icon-logo-a-float);
                padding-bottom: 4px;
            }
            .icon-under_logo_b {
                text-align: var(--company-area-icon-logo-b-align);
                color: #000;
                font-size: var(--company-area-icon-logo-b-font-size);
                translate: var(--company-area-icon-logo-b-translate);
                float: var(--company-area-icon-logo-b-float);
            }
        }
        .company_addres {
            text-align: var(--company-area-company-addres-align);
            font-size: var(--company-area-company-addres-font-size);
            padding-top: var(--company-area-company-addres-padding-top);
            padding-bottom: var(--company-area-company-addres-padding-bottom);
        }
        .company_info {
            overflow: hidden;
            h2 {
                font-size: var(--company-area-company-info-h2-font-size);
                padding-top: var(--company-area-company-info-h2-padding-top);
                padding-bottom: 3px;
            }
            ul {
                padding-top: 10px;
                padding-bottom: 10px;
                li {
                    font-size: var(--company-area-company-info-li-font-size);
                    overflow: hidden;
                    width: 100%;
                    margin-bottom: var(--company-area-company-info-li-margin-bottom);
                }
                em {
                    font-size: 90%;
                    font-style: normal;
                    text-align: center;
                    color: #fff;
                    background-color: #4CB9A7;
                    display: block;
                    float: left;
                    width: var(--company-area-company-info-em-width);
                    height: var(--company-area-company-info-em-height);
                    padding-top: var(--company-area-company-info-em-padding-top);
                    clip-path: polygon(7% 0, 100% 0, 100% 100%, 0% 100%);
                }
                small {
                    font-size: 100%;
                    display: block;
                    float: left;
                    width: var(--company-area-company-info-small-width);
                    height: var(--company-area-company-info-small-height);
                    padding-top: var(--company-area-company-info-small-padding-top);
                    padding-left: 10px;
                    background-color: #e9e9e9;
                    clip-path: polygon(0 0, 93% 0, 100% 100%, 0% 100%);
                }
            }
        }
    }
    #company_profile {
        font-size: var(--company-profile-font-size);
        float: var(--company-profile-float);
        overflow: hidden;
        width: var(--company-profile-width);
        height: auto;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        border-bottom: solid 3px #00bbb6;
    }
}
#company_area_spc {
    --company-area-spc-width: calc(100% - 20px); --company-area-spc-left: 10px; --company-area-spc-right: 10px; --company-area-spc-padding-bottom: 417px;
    --company-area-float: none; --company-area-width: 100%;
    --company-area-icon-logo-a-align: center; --company-area-icon-logo-a-font-size: 2.9rem; --company-area-icon-logo-a-float: none;
    --company-area-icon-logo-b-align: center; --company-area-icon-logo-b-font-size: 1.4rem; --company-area-icon-logo-b-translate: 0 0; --company-area-icon-logo-b-float: none;
    --company-area-company-addres-align: center; --company-area-company-addres-font-size: 1.1rem; --company-area-company-addres-padding-top: 30px; --company-area-company-addres-padding-bottom: 30px;
    --company-area-company-info-h2-font-size: 1.2rem; --company-area-company-info-h2-padding-top: 3px;
    --company-area-company-info-li-font-size: 1.1rem; --company-area-company-info-li-margin-bottom: 10px;
    --company-area-company-info-em-width: 120px; --company-area-company-info-em-height: 29px; --company-area-company-info-em-padding-top: 3px;
    --company-area-company-info-small-width: calc(100% - 130px); --company-area-company-info-small-height: 29px; --company-area-company-info-small-padding-top: 3px;
    --company-profile-font-size: 0.9rem; --company-profile-float: none; --company-profile-width: calc(100% - 20px);
}
@media (width >= 375px)  { /* 375-789 */
    #company_area_spc {
        --company-area-spc-width: calc(100% - 20px); --company-area-spc-left: 10px; --company-area-spc-right: 10px; --company-area-spc-padding-bottom: 568px;
        --company-area-float: none; --company-area-width: 100%;
        --company-area-icon-logo-a-align: left; --company-area-icon-logo-a-font-size: 3.1rem; --company-area-icon-logo-a-float: left;
        --company-area-icon-logo-b-align: left; --company-area-icon-logo-b-font-size: 1.4rem; --company-area-icon-logo-b-translate: 8px 10px; --company-area-icon-logo-b-float: left;
        --company-area-company-addres-align: left; --company-area-company-addres-font-size: 1.2rem; --company-area-company-addres-padding-top: 25px; --company-area-company-addres-padding-bottom: 25px;
        --company-area-company-info-h2-font-size: 1.3rem; --company-area-company-info-h2-padding-top: 10px;
        --company-area-company-info-li-font-size: 1.2rem; --company-area-company-info-li-margin-bottom: 10px;
        --company-area-company-info-em-width: 110px; --company-area-company-info-em-height: 35px; --company-area-company-info-em-padding-top: 2px;
        --company-area-company-info-small-width: calc(100% - 140px); --company-area-company-info-small-height: 37px; --company-area-company-info-small-padding-top: 1px;
        --company-profile-font-size: 1.1rem; --company-profile-float: none; --company-profile-width: calc(100% - 20px);
    }
}
@media (width >= 790px)  { /* 790-999 */
    #company_area_spc {
        --company-area-spc-width: calc(100% - 20px); --company-area-spc-left: 10px; --company-area-spc-right: 10px; --company-area-spc-padding-bottom: 143px;
        --company-area-float: left; --company-area-width: 350px;
        --company-area-icon-logo-a-align: left; --company-area-icon-logo-a-font-size: 3.3rem; --company-area-icon-logo-a-float: left;
        --company-area-icon-logo-b-align: left; --company-area-icon-logo-b-font-size: 2.0rem; --company-area-icon-logo-b-translate: 8px 9px; --company-area-icon-logo-b-float: left;
        --company-area-company-addres-align: left; --company-area-company-addres-font-size: 1.3rem; --company-area-company-addres-padding-top: 25px; --company-area-company-addres-padding-bottom: 25px;
        --company-area-company-info-h2-font-size: 1.4rem; --company-area-company-info-h2-padding-top: 18px;
        --company-area-company-info-li-font-size: 1.4rem; --company-area-company-info-li-margin-bottom: 10px;
        --company-area-company-info-em-width: 110px; --company-area-company-info-em-height: 35px; --company-area-company-info-em-padding-top: 2px;
        --company-area-company-info-small-width: calc(100% - 140px); --company-area-company-info-small-height: 37px; --company-area-company-info-small-padding-top: 1px;
        --company-profile-font-size: 1.2rem; --company-profile-float: right; --company-profile-width: calc(100% - 370px);
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #company_area_spc {
        --company-area-spc-width: 1000px; --company-area-spc-left: auto; --company-area-spc-right: auto; --company-area-spc-padding-bottom: 213px;
        --company-area-float: left; --company-area-width: 420px;
        --company-area-icon-logo-a-align: left; --company-area-icon-logo-a-font-size: 3.4rem; --company-area-icon-logo-a-float: left;
        --company-area-icon-logo-b-align: left; --company-area-icon-logo-b-font-size: 2.1rem; --company-area-icon-logo-b-translate: 8px 9px; --company-area-icon-logo-b-float: left;
        --company-area-company-addres-align: left; --company-area-company-addres-font-size: 1.4rem; --company-area-company-addres-padding-top: 25px; --company-area-company-addres-padding-bottom: 25px;
        --company-area-company-info-h2-font-size: 1.5rem; --company-area-company-info-h2-padding-top: 25px;
        --company-area-company-info-li-font-size: 1.5rem; --company-area-company-info-li-margin-bottom: 10px;
        --company-area-company-info-em-width: 117px; --company-area-company-info-em-height: 36px; --company-area-company-info-em-padding-top: 3px;
        --company-area-company-info-small-width: calc(100% - 140px); --company-area-company-info-small-height: 38px; --company-area-company-info-small-padding-top: 2px;
        --company-profile-font-size: 1.3rem; --company-profile-float: right; --company-profile-width: calc(100% - 440px);
    }
}
@media (width >= 1400px) { /* 1400over */
    #company_area_spc {
        --company-area-spc-width: 1400px; --company-area-spc-left: auto; --company-area-spc-right: auto; --company-area-spc-padding-bottom: 213px;
        --company-area-float: left; --company-area-width: 42500px0px;
        --company-area-icon-logo-a-align: left; --company-area-icon-logo-a-font-size: 3.5rem; --company-area-icon-logo-a-float: left;
        --company-area-icon-logo-b-align: left; --company-area-icon-logo-b-font-size: 2.2rem; --company-area-icon-logo-b-translate: 8px 9px; --company-area-icon-logo-b-float: left;
        --company-area-company-addres-align: left; --company-area-company-addres-font-size: 1.5rem; --company-area-company-addres-padding-top: 30px; --company-area-company-addres-padding-bottom: 30px;
        --company-area-company-info-h2-font-size: 1.6rem; --company-area-company-info-h2-padding-top: 25px;
        --company-area-company-info-li-font-size: 1.6rem; --company-area-company-info-li-margin-bottom: 10px;
        --company-area-company-info-em-width: 130px; --company-area-company-info-em-height: 39px; --company-area-company-info-em-padding-top: 3px;
        --company-area-company-info-small-width: calc(100% - 140px); --company-area-company-info-small-height: 40px; --company-area-company-info-small-padding-top: 2px;
        --company-profile-font-size: 1.4rem; --company-profile-float: right; --company-profile-width: calc(100% - 520px);
    }
}

/* under_group_area */
#under_group_area {
    overflow: hidden;
    width: var(--under-group-area-width);
    margin-left: var(--under-group-area-margin-left);
    margin-right: var(--under-group-area-margin-right);
    .under_group_link {
        float: left;
        width: var(--under-group-link-width);
        height: auto;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 20px;
        a {
            display: block;
            text-decoration: none;
            .under_group_link_image {
                width: 100%;
                height: var(--under-group-link-image-height);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: top center;
                border-radius: 5px;
                &.under_group_link_image_01 {
                    background-image: url(image/base/external_link_gb_01.webp);
                }
                &.under_group_link_image_02 {
                    background-image: url(image/base/external_link_gb_02.webp);
                }
                &.under_group_link_image_03 {
                    background-image: url(image/base/external_link_gb_03.webp);
                }
                &.under_group_link_image_04 {
                    background-image: url(image/base/external_link_gb_04.webp);
                }
                &:hover {
                    opacity: 0.8;
                    translate: 1px 1px;
                }
            }
            span {
                font-size: var(--under-group-link-span-font-size);
                display: block;
                text-align: center;
                color: #352121;
                padding-top: var(--under-group-link-span-padding-top);
                &:hover {
                    color: #f1f1f1;
                }
            }
        }
    }
}
#under_group_area {
    --under-group-area-width: calc(100% - 20px);
    --under-group-area-margin-left: 10px;
    --under-group-area-margin-right: 10px;
    --under-group-link-width: calc(100% / 2 - 20px);
    --under-group-link-image-height: 110px;
    --under-group-link-span-font-size: 2.5rem;
    --under-group-link-span-padding-top: 8px;
}
@media (width >= 375px)  { /* 375-789 */
    #under_group_area {
        --under-group-area-width: calc(100% - 20px);
        --under-group-area-margin-left: 10px;
        --under-group-area-margin-right: 10px;
        --under-group-link-width: calc(100% / 2 - 20px);
        --under-group-link-image-height: 115px;
        --under-group-link-span-font-size: 3.3rem;
        --under-group-link-span-padding-top: 10px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #under_group_area {
        --under-group-area-width: calc(100% - 20px);
        --under-group-area-margin-left: 10px;
        --under-group-area-margin-right: 10px;
        --under-group-link-width: calc(100% / 2 - 20px);
        --under-group-link-image-height: 135px;
        --under-group-link-span-font-size: 3.8rem;
        --under-group-link-span-padding-top: 12px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #under_group_area {
        --under-group-area-width: 1000px;
        --under-group-area-margin-left: auto;
        --under-group-area-margin-right: auto;
        --under-group-link-width: calc(100% / 4 - 20px);
        --under-group-link-image-height: 165px;
        --under-group-link-span-font-size: 4.2rem;
        --under-group-link-span-padding-top: 14px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #under_group_area {
        --under-group-area-width: 1400px;
        --under-group-area-margin-left: auto;
        --under-group-area-margin-right: auto;
        --under-group-link-width: calc(100% / 4 - 20px);
        --under-group-link-image-height: 240px;
        --under-group-link-span-font-size: 5.0rem;
        --under-group-link-span-padding-top: 16px;
    }
}


/* copy design */
#copy_design {
    height: 145px;
    text-align: center;
    #copy {
        font-size: 0.9rem;
        padding-top: 29px;
        padding-bottom: 10px;
    }
}


/* remodal overwrite */
.remodal  {
    padding: 0px!important;
    background-color: #fff !important;
    .remodal-close {
        color: #000 !important;
        top: 0px!important;
        right: 10px!important;
        &:before {
            font-size: 2.2rem!important;
        }
        &:hover {
            color: #f60!important;
        }
    }
    .remodal-cancel {
        font-size: 0.9rem;
        background-color: #4cb9a7 !important;
        display: block !important;
        clear: both;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 5px;
        &:hover {
            background-color: #f60!important;
        }
    }
}
@media (width >= 375px)  { /* 375-789 */
    .remodal  {
        .remodal-close {
            right: 15px!important;
            &:before {
                font-size: 3rem!important;
            }
        }
        .remodal-cancel {
            font-size: 1.0rem;
        }
    }
}
@media (width >= 790px)  { /* 790-999 */
    .remodal  {
        .remodal-close {
            right: 20px!important;
            &:before {
                font-size: 3.5rem!important;
            }
        }
        .remodal-cancel {
            font-size: 1.1rem;
        }
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .remodal  {
        .remodal-close {
            right: 25px!important;
            &:before {
                font-size: 4rem!important;
            }
        }
        .remodal-cancel {
            font-size: 1.2rem;
        }
    }
}
@media (width >= 1400px) { /* 1400over */
    .remodal  {
        .remodal-close {
            right: 30px!important;
            &:before {
                font-size: 5rem!important;
            }
        }
        .remodal-cancel {
            font-size: 1.3rem;
        }
    }
}


/* modal-content */
.modal-content {
    margin-left: 20px;
    margin-right: 20px;
    h1 {
        --font-min: 1.6;
        --font-max: 1.4;

        font-size: clamp(
            calc(var(--font-min) * 1rem),
            calc((var(--font-min) + (var(--font-max) - var(--font-min)) * var(--progress)) * 1rem),
            calc(var(--font-max) * 1rem)
        );
        text-align: center;
        font-weight: 900;
        padding-top: 40px;
        padding-bottom: 10px;
    }
    p {
        --font-min: 0.8;
        --font-max: 1.4;
        
        font-size: clamp(
            calc(var(--font-min) * 1rem),
            calc((var(--font-min) + (var(--font-max) - var(--font-min)) * var(--progress)) * 1rem),
            calc(var(--font-max) * 1rem)
        );
        text-align: left;
        width: auto;
        padding-top: 15px;
        padding-bottom: 15px;
        margin-left: 10%;
        margin-right: 10%;
    }
    ul {
        overflow: hidden;
        margin-bottom: var(--modal-content-margin-bottom);
        li {
            float: left;
            padding-top: 13px;
            padding-bottom: 4px;
            margin-left: 10px;
            margin-right: 10px;
            border-bottom: solid 1px #333;
            a {
                --font-min: 0.9;
                --font-max: 1.6;

                font-size: clamp(
                    calc(var(--font-min) * 1rem),
                    calc((var(--font-min) + (var(--font-max) - var(--font-min)) * var(--progress)) * 1rem),
                    calc(var(--font-max) * 1rem)
                );
                font-weight: bold;
                text-decoration: none;
                color: #000;
                text-align: center;
                display: block;
                padding-top: 5px;
                padding-bottom: 5px;
                &:hover {
                    color: #f60;
                }
            }
            em {
                font-style: normal;
                display: block;
            }
            .modal_nav_image {
                width: 100%;
                height: var(--modal_nav_image-height);
                background-color: #caf3f2;
                display: block;
                margin-bottom: 10px;
                border-radius: 10px;
                background-size: auto 90%;
                background-position: center center;
                background-repeat: no-repeat;
                &.modal_nav_image_01 {
                    background-image: url(image/base/heavy_machinery_01.webp);
                }
                &.modal_nav_image_02 {
                    background-image: url(image/base/heavy_machinery_02.webp);
                }
                &.modal_nav_image_03 {
                    background-image: url(image/base/heavy_machinery_05.webp);
                }
                &.modal_nav_image_04 {
                    background-image: url(image/base/heavy_machinery_06.webp);
                }
            }
        }
        &.modal_nav_first li {
            width: var(--modal_nav_first-li-width);
            margin-left: var(--modal_nav_first-li-margin-left);
            margin-right: auto;
        }
        &.modal_nav_second li {
            width: var(--modal_nav_second-li-width);
        }
        &.modal_nav_third li {
            width: var(--modal_nav_third-li-width);
        }
        &.modal_nav_forth li {
            width: var(--modal_nav_forth-li-width);
        }
    }
}
.modal-content {
    --modal-content-margin-bottom: 20px;
    --modal_nav_image-height: 70px;
    --modal_nav_first-li-width: 140px;
    --modal_nav_first-li-margin-left: 100px;
    --modal_nav_second-li-width: calc(100% / 2 - 20px);
    --modal_nav_third-li-width: calc(100% / 2 - 20px);
    --modal_nav_forth-li-width: calc(100% / 2 - 20px);
}
@media (width >= 375px)  { /* 375-789 */
    .modal-content {
        --modal-content-margin-bottom: 30px;
        --modal_nav_image-height: 110px;
        --modal_nav_first-li-width: 158px;
        --modal_nav_first-li-margin-left: 26px;
        --modal_nav_second-li-width: calc(100% / 2 - 20px);
        --modal_nav_third-li-width: calc(100% / 2 - 20px);
        --modal_nav_forth-li-width: calc(100% / 2 - 20px);
    }
}
@media (width >= 790px)  { /* 790-999 */
    .modal-content {
        --modal-content-margin-bottom: 35px;
        --modal_nav_image-height: 160px;
        --modal_nav_first-li-width: 158px;
        --modal_nav_first-li-margin-left: 26px;
        --modal_nav_second-li-width: calc(100% / 4 - 20px);
        --modal_nav_third-li-width: calc(100% / 3 - 20px);
        --modal_nav_forth-li-width: calc(100% / 2 - 20px);
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .modal-content {
        --modal-content-margin-bottom: 40px;
        --modal_nav_image-height: 190px;
        --modal_nav_first-li-width: 186px;
        --modal_nav_first-li-margin-left: 46px;
        --modal_nav_second-li-width: calc(100% / 4 - 20px);
        --modal_nav_third-li-width: calc(100% / 3 - 20px);
        --modal_nav_forth-li-width: calc(100% / 2 - 20px);
    }
}
@media (width >= 1400px) { /* 1400over */
    .modal-content {
        --modal-content-margin-bottom: 40px;
        --modal_nav_image-height: 210px;
        --modal_nav_first-li-width: 240px;
        --modal_nav_first-li-margin-left: 100px;
        --modal_nav_second-li-width: calc(100% / 4 - 20px);
        --modal_nav_third-li-width: calc(100% / 3 - 20px);
        --modal_nav_forth-li-width: calc(100% / 2 - 20px);
    }
}


/* smf-form */
.smf-form {
    text-align: left;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 10px;
}
.wp-block-snow-monkey-forms-item {
    padding-bottom: 10px;
}
.smf-item__col--label {
    font-size: 1.0rem;
    font-weight: bold;
}
.smf-item__description {
        font-size: 80%!important;
        font-weight: normal;
        color: #333;
}
.smf-form input,
.smf-form textarea {
    font-size: 0.8rem;
}
.smf-placeholder {
    font-size: 0.8rem;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #7ac1b7;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 4px;
    margin-bottom: 15px;
    border-radius: 9px;
}
.smf-form .smf-text-control__control,
.smf-form .smf-textarea-control__control {
    background-color: #f1f1f1;
    line-height: 1.6;
}
.smf-action .smf-button-control__control {
    font-size: 1.0rem;
    color: #fff;
    background-color: #410e5b;
    background-image: none;
    border-radius: 10px;
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;
}
.smf-control-description {
    font-size: 1.4rem;
    color: #000;
}
.smf-progress-tracker__item[aria-current=true] .smf-progress-tracker__item__number {
    background-color: #7ac1b7;
}
.smf-progress-tracker__item__number {
    width: 35px;
    height: 35px;
}
.smf-label {
    float: left;
    margin-right: 10px;
}
.smf-checkboxes-control__control {
    overflow: hidden;
}
@media (width >= 375px)  { /* 375-789 */
    .smf-item__col--label {
        font-size: 1.2rem;
    }
    .smf-form input,
    .smf-form textarea  {
        font-size: 1.0rem;
    }
    .smf-placeholder {
        font-size: 1.0rem;
    }
    .smf-action .smf-button-control__control {
        font-size: 1.2rem;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .smf-item__col--label {
        font-size: 1.4rem;
    }
    .smf-form input,
    .smf-form textarea  {
        font-size: 1.2rem;
    }
    .smf-placeholder {
        font-size: 1.2rem;
    }
    .smf-action .smf-button-control__control {
        font-size: 1.4rem;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .smf-item__col--label {
        font-size: 1.6rem;
    }
    .smf-form input,
    .smf-form textarea {
        font-size: 1.3rem;
    }
    .smf-placeholder {
        font-size: 1.3rem;
    }
    .smf-action .smf-button-control__control {
        font-size: 1.6rem;
    }
}
@media (width >= 1400px) { /* 1400over */
    .smf-item__col--label {
        font-size: 1.8rem;
    }
    .smf-form input,
    .smf-form textarea  {
        font-size: 1.5rem;
    }
    .smf-placeholder {
        font-size: 1.5rem;
    }
    .smf-action .smf-button-control__control {
        font-size: 1.8rem;
    }
}