/*
Theme Name: unity v26 Theme
Theme URI: https://www.unity-okinawa.co.jp
Description: Designed by ML Design
Version: 26.04
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&family=Shippori+Mincho:wght@400;800&display=swap');
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?mkkg30');
    src:  url('fonts/icomoon.eot?mkkg30#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?mkkg30') format('truetype'),
    url('fonts/icomoon.woff?mkkg30') format('woff'),
    url('fonts/icomoon.svg?mkkg30#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-cautch:before {
    content: "\e900";
}
.icon-icon_heart:before {
    content: "\e905";
}
.icon-icon_people:before {
    content: "\e906";
}
.icon-home:before {
    content: "\e90a";
}
.icon-location:before {
    content: "\e90c";
}
.icon-clock:before {
    content: "\e90d";
}
.icon-arrow-left2:before {
    content: "\e901";
}
.icon-arrow-up2:before {
    content: "\e902";
}
.icon-arrow-right2:before {
    content: "\e903";
}
.icon-arrow-down2:before {
    content: "\e904";
}
.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: 0.9rem;
    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;
    :is(span, 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;
    }
    span {
        background-color: #7994a7;
        color: #FFFFFF;
    }
    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: #228d34;
        text-align: center;
        text-decoration: none;
        display: none;
        border-radius: 10px;
        &:hover {
            color: #F60;
        }
        & span {
            transform: translate(0px, 50%);
            display: block;
        }
    }
}
.appearance a {
    display: block!important;
}


/* entry faq */
.entry,
.faq {

    --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-family: "Shippori Mincho", serif;
        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-family: "Shippori Mincho", serif;
        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-family: "Shippori Mincho", serif;
        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;
        }
    }
}


/* logo */
#logo {
    position: absolute;
    top: var(--logo-top);
    left: var(--logo-left);
    z-index: 2;
    transition: 0.2s;
    & a {
        display: block;
        width: var(--logo-a-w);
        height: var(--logo-a-h);
        background-image: url(image/base/logo.svg);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
        &:hover {
            opacity: 0.8; translate: 1px 1px;
        }
    }
}
#logo {
    --logo-top: 597px; --logo-left: 5px;
    --logo-a-w: 121px; --logo-a-h: 71px;
    --subpage-logo-top: 230px;
    .subpage & {
        top: var(--subpage-logo-top);
    }
}
@media (width >= 375px)  { /* 375-789 */
    #logo {
        --logo-top: 638px; --logo-left: 10px;
        --logo-a-w: 143px; --logo-a-h: 89px;
        --subpage-logo-top: 267px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #logo {
        --logo-top: 676px; --logo-left: 20px;
        --logo-a-w: 191px; --logo-a-h: 115px;
        --subpage-logo-top: 330px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #logo {
        --logo-top: 849px; --logo-left: 45px;
        --logo-a-w: 244px; --logo-a-h: 142px;
        --subpage-logo-top: 407px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #logo {
        --logo-top: 958px; --logo-left: 45px;
        --logo-a-w: 300px; --logo-a-h: 178px;
        --subpage-logo-top: 510px;
    }
}


#water_logo {
    position: absolute;
    top: var(--logo-top);
    left: var(--logo-left);
    z-index: 2;
    transition: 0.2s;
    & a {
        display: block;
        width: var(--logo-a-w);
        height: var(--logo-a-h);
        background-image: url(image/base/logo_water.svg);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
    }
}
#water_logo {
    --logo-top: 597px; --logo-left: 5px;
    --logo-a-w: 121px; --logo-a-h: 71px;
    --subpage-logo-top: 230px;
    .subpage & {
        top: var(--subpage-logo-top);
    }
}
@media (width >= 375px)  { /* 375-789 */
    #water_logo {
        --logo-top: 638px; --logo-left: 10px;
        --logo-a-w: 143px; --logo-a-h: 89px;
        --subpage-logo-top: 267px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #water_logo {
        --logo-top: 676px; --logo-left: 20px;
        --logo-a-w: 191px; --logo-a-h: 115px;
        --subpage-logo-top: 330px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #water_logo {
        --logo-top: 849px; --logo-left: 45px;
        --logo-a-w: 244px; --logo-a-h: 142px;
        --subpage-logo-top: 407px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #water_logo {
        --logo-top: 958px; --logo-left: 45px;
        --logo-a-w: 300px; --logo-a-h: 178px;
        --subpage-logo-top: 510px;
    }
}


/* bg_curve */
.bg_curve {
    position: absolute;
    background-repeat: no-repeat;
}
.bg_curve_01 {
    top: var(--bg_curve_01-top);
    left: 0;
    right: auto;
    z-index: 1;
    width: 100%;
    height: var(--bg_curve_01-height);
    background-image: var(--bg_curve_01-background-image);
    background-position: top center;
    background-size: 100% 100px;
    .subpage & {
        top: var(--subpage-bg_curve_01-top);
    }
}
.wind {
    position: absolute;
    background-repeat: no-repeat;
}
.wind_01 {
    top: var(--wind_01-top);
    left: auto;
    right: 0;
    z-index: 1;
    width: 100%;
    height: var(--wind_01-height);
    background-image: var(--wind_01-background-image);
    background-position: top center;
    background-size: 100% auto;
    .subpage & {
        top: var(--subpage-wind_01-top);
    }
}
.bg_curve_01 {
    --bg_curve_01-top: 501px;
    --bg_curve_01-height: 100px;
    --bg_curve_01-background-image: url(image/base/bg_curve_01m.svg);
    --subpage-bg_curve_01-top: 171px;
}
.wind {
    --wind_01-top: 531px;
    --wind_01-height: 100px;
    --wind_01-background-image: url(image/base/wind_01m.svg);
    --subpage-wind_01-top: 187px;
}
@media (width >= 375px)  { /* 375-789 */
    .bg_curve_01 {
        --bg_curve_01-top: 551px;
        --bg_curve_01-height: 100px;
        --bg_curve_01-background-image: url(image/base/bg_curve_01m.svg);
        --subpage-bg_curve_01-top: 211px;
    }
    .wind {
        --wind_01-top: 569px;
        --wind_01-height: 100px;
        --wind_01-background-image: url(image/base/wind_01m.svg);
        --subpage-wind_01-top: 187px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .bg_curve_01 {
        --bg_curve_01-top: 591px;
        --bg_curve_01-height: 100px;
        --bg_curve_01-background-image: url(image/base/bg_curve_01m.svg);
        --subpage-bg_curve_01-top: 271px;
    }
    .wind {
        --wind_01-top: 595px;
        --wind_01-height: 100px;
        --wind_01-background-image: url(image/base/wind_01m.svg);
        --subpage-wind_01-top: 262px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .bg_curve_01 {
        --bg_curve_01-top: 701px;
        --bg_curve_01-height: 100px;
        --bg_curve_01-background-image: url(image/base/bg_curve_01.svg);
        --subpage-bg_curve_01-top: 301px;
    }
    .wind {
        --wind_01-top: 686px;
        --wind_01-height: 100px;
        --wind_01-background-image: url(image/base/wind_01.svg);
        --subpage-wind_01-top: 288px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .bg_curve_01 {
        --bg_curve_01-top: 810px;
        --bg_curve_01-height: 100px;
        --bg_curve_01-background-image: url(image/base/bg_curve_01.svg);
        --subpage-bg_curve_01-top: 391px;
    }
    .wind {
        --wind_01-top: 779px;
        --wind_01-height: 100px;
        --wind_01-background-image: url(image/base/wind_01.svg);
        --subpage-wind_01-top: 364px;
    }
}


/* 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);
    transition: 0.2s;
    & ul {
        overflow: hidden;
        & li {
            position: absolute;
            width: var(--modal-li-w);
            height: var(--modal-li-h);
            background-image: url(image/base/menu_bg.svg);
            background-repeat: no-repeat;
            background-position: right 0;
            background-size: 100% auto;
            &.m1 { top: var(--m1-top); left: var(--m1-left); }
            &.m2 { top: var(--m2-top); left: var(--m2-left); }
            & a {
                font-size: var(--font-size);
                line-height: 1.3;
                font-weight: bold;
                text-align: center;
                text-decoration: none;
                color: #000;
                height: var(--modal-li-h);
                display: flex;
                justify-content: center;
                align-items: center;
                &:hover { color: #f60; }
                & img {
                    float: left;
                    height: var(--img-height);
                }
                & small {
                    display: var(--small-display);
                    font-size: 43%;
                    translate: 5px var(--small-y);
                }
            }
        }
    }
    &.fixed {
        position: fixed;
        top: 0;
        height: var(--fix-modal-h);
        --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 & {
            top: 0;
        }
    }
    .subpage & {
        top: var(--subpage-modal_nav-top);
    }
}
#modal_nav {
    --modal-nav-w: 185px; --modal-nav-h: 86px; --modal-nav-top: 551px;
    --modal-li-w: 96px; --modal-li-h: 53px;
    --m1-top: 5px; --m1-left: 82px;
    --m2-top: 32px; --m2-left: 0;
    --font-size: 1.2rem; --img-height: 22px; --small-y: 4px;
    --fix-modal-h: 51px;
    --fix-modal-li-w: 64px;
    --fix-modal-li-h: 34px;
    --fix-m1-t: 8px;
    --fix-m1-l: 115px;
    --fix-m2-t: 8px;
    --fix-m2-l: 44px;
    --subpage-modal_nav-top: 207px;
}
@media (width >= 375px)  { /* 375-789 */
    #modal_nav {
        --modal-nav-w: 195px; --modal-nav-h: 93px; --modal-nav-top: 583px;
        --modal-li-w: 105px; --modal-li-h: 58px;
        --m1-top: 5px; --m1-left: 82px;
        --m2-top: 34px; --m2-left: 0;
        --font-size: 1.4rem; --img-height: 24px; --small-y: 1px;
        --fix-modal-h: 51px;
        --fix-modal-li-w: 70px;
        --fix-modal-li-h: 37px;
        --fix-m1-t: 8px;
        --fix-m1-l: 114px;
        --fix-m2-t: 8px;
        --fix-m2-l: 38px;
        --subpage-modal_nav-top: 244px;
    }
}
@media (width >= 790px) { /* 790-999 */
    #modal_nav {
        --modal-nav-w: 317px; --modal-nav-h: 107px; --modal-nav-top: 631px;
        --modal-li-w: 148px; --modal-li-h: 81px;
        --m1-top: 5px; --m1-left: 156px;
        --m2-top: 24px; --m2-left: 0;
        --font-size: 1.9rem; --img-height: 32px; --small-y: 1px;
        --fix-modal-h: 62px;
        --fix-modal-li-w: 90px;
        --fix-modal-li-h: 49px;
        --fix-m1-t: 8px;
        --fix-m1-l: 217px;
        --fix-m2-t: 8px;
        --fix-m2-l: 118px;
        --subpage-modal_nav-top: 304px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #modal_nav {
        --modal-nav-w: 440px; --modal-nav-h: 123px; --modal-nav-top: 675px;
        --modal-li-w: 169px; --modal-li-h: 91px;
        --m1-top: 7px; --m1-left: 198px;
        --m2-top: 27px; --m2-left: 0;
        --font-size: 2.2rem; --img-height: 40px; --small-y: 1px;
        --fix-modal-h: 77px;
        --fix-modal-li-w: 124px;
        --fix-modal-li-h: 67px;
        --fix-m1-t: 8px;
        --fix-m1-l: 300px;
        --fix-m2-t: 8px;
        --fix-m2-l: 166px;
        --subpage-modal_nav-top: 294px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #modal_nav {
        --modal-nav-w: 440px; --modal-nav-h: 137px; --modal-nav-top: 789px;
        --modal-li-w: 179px; --modal-li-h: 100px;
        --m1-top: 15px; --m1-left: 198px;
        --m2-top: 30px; --m2-left: 0;
        --font-size: 2.5rem; --img-height: 46px; --small-y: 1px;
        --fix-modal-h: 80px;
        --fix-modal-li-w: 130px;
        --fix-modal-li-h: 70px;
        --fix-m1-t: 8px;
        --fix-m1-l: 300px;
        --fix-m2-t: 8px;
        --fix-m2-l: 160px;
        --subpage-modal_nav-top: 370px;
    }
}


/* sl sub_theme */
#sl {
    overflow: hidden;
    height: var(--sl-height);
    .subpage & {
        height: var(--subpage-sl-height);
    }
    & video {
        height: var(--sl-height);
        width: 100%;
        position: absolute;
        object-fit: cover;
        object-position: center center;
    }
    #sub_theme {
        overflow: hidden;
        height: var(--subpage-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_tour {
            background-image: url(image/sl/detail_tour.webp);
        }
        &.detail_faq {
            background-image: url(image/sl/detail_faq.webp);
        }
        &.detail_blogs {
            background-image: url(image/sl/detail_blogs.webp);
        }
        &.detail_company {
            background-image: url(image/sl/detail_company.webp);
        }
        &.detail_history {
            background-image: url(image/sl/detail_history.webp);
        }
        &.detail_group3 {
            background-image: url(image/sl/detail_group3.webp);
        }
        &.detail_group4 {
            background-image: url(image/sl/detail_group4.webp);
        }
        &.detail_group10 {
            background-image: url(image/sl/detail_group10.webp);
        }
        &.detail_group6 {
            background-image: url(image/sl/detail_group6.webp);
        }
        &.detail_water {
            background-image: url(image/sl/detail_water.webp);
        }
    }
}
#sl {
    --sl-height: 600px; --subpage-sl-height: 270px;
}
@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: 370px; }
}
@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: 18;
    --font-max: 33;
    
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    top: var(--cautch-top);
    right: var(--cautch-right);
    z-index: 4;
    transition: 0.2s;
    & 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: 209px; --cautch-right: 20px;
}
@media (width >= 375px)  { /* 375-789 */
    #cautch {
        --cautch-top: 65px; --cautch-right: 20px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #cautch {
        --cautch-top: 83px; --cautch-right: 46px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #cautch {
        --cautch-top: 105px; --cautch-right: 53px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #cautch {
        --cautch-top: 141px; --cautch-right: 70px;
    }
}


/* disp */
#disp {
    text-align: var(--disp-text-align);
    width: var(--disp-w);
    height: auto;
    padding-top: var(--disp-padding-top);
    padding-left: var(--disp-padding-left);
    padding-right: 20px;
    float: var(--disp-float);
    overflow: hidden;
    transition: 0.2s;
    .subpage & {
        padding-top: var(--subpage-disp-padding-top);
    }
    & em {
        --font-min: 1.0;
        --font-max: 1.7;
        
        font-family: "Shippori Mincho", serif;
        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-style: normal;
        font-weight: 800;
        text-align: center;
        display: block;
    }
    & small {
        --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: 10px;
        padding-bottom: 10px;
    }
}
#disp {
    --disp-text-align: center;
    --disp-w: calc(100% - 40px);
    --disp-padding-top: 131px; --disp-padding-left: 20px;
    --disp-float: none;
    --subpage-disp-padding-top: 55px;
}
@media (width >= 375px)  { /* 375-789 */
    #disp {
        --disp-text-align: center;
        --disp-w: calc(100% - 40px);
        --disp-padding-top: 138px; --disp-padding-left: 20px;
        --disp-float: none;
        --subpage-disp-padding-top: 69px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #disp {
        --disp-text-align: center;
        --disp-w: calc(100% - 40px);
        --disp-padding-top: 139px; --disp-padding-left: 20px;
        --disp-float: none;
        --subpage-disp-padding-top: 74px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #disp {
        --disp-text-align: left;
        --disp-w: 425px;
        --disp-padding-top: 12px; --disp-padding-left: 0px;
        --disp-float: right;
        --subpage-disp-padding-top: 30px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #disp {
        --disp-text-align: left;
        --disp-w: 442px;
        --disp-padding-top: 48px; --disp-padding-left: 0px;
        --disp-float: right;
        --subpage-disp-padding-top: 33px;
    }
}


/* status */
#status {
    --font-min: 1.0;
    --font-max: 1.8;
    
    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: 800;
    text-align: center;
    width: 100%;
    height: auto;
    & em {
        font-style: normal;
        display: block;
    }
    & small {
        font-size: 80%;
    }
    & span {
        margin-right: 5px;
    }
}


/* sub_nav */
#sub_nav {
    position: absolute;
    top: var(--sub_nav-top);
    right: 0;
    left: auto;
    z-index: 3;
    .link {
        position: absolute;
        width: var(--sub_nav-width);
        height: var(--sub_nav-height);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        & img {
            float: left;
            margin-right: 5px;
            width: auto;
            height: var(--sub_nav-img-height);
        }
        & a {
            font-size: var(--sub_nav-a-font-size);
            font-weight: 700;
            color: #000;
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: var(--sub_nav-height);
            & small {
                text-align: center;
            }
            &:hover {
                color: #f60;
            }
        }
        &.link_01 {
            top: var(--link_01-top);
            right: var(--link_01-right);
            background-image: url(image/base/staff_bg.svg);
        }
        &.link_02 {
            top: var(--link_02-top);
            right: var(--link_02-right);
            background-image: url(image/base/water_bg.svg);
        }
    }
}
#sub_nav {
    --sub_nav-top: 628px;
    --sub_nav-width: 82px;
    --sub_nav-height: 47px;
    --sub_nav-a-font-size: 0.7rem;
    --sub_nav-img-height: 22px;
    --link_01-top: 13px;
    --link_01-right: 97px;
    --link_02-top: 0px;
    --link_02-right: 10px;
}
@media (width >= 375px)  { /* 375-789 */
    #sub_nav {
        --sub_nav-top: 681px;
        --sub_nav-width: 92px;
        --sub_nav-height: 55px;
        --sub_nav-a-font-size: 0.8rem;
        --sub_nav-img-height: 27px;
        --link_01-top: 13px;
        --link_01-right: 110px;
        --link_02-top: 0px;
        --link_02-right: 14px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #sub_nav {
        --sub_nav-top: 730px;
        --sub_nav-width: 115px;
        --sub_nav-height: 67px;
        --sub_nav-a-font-size: 1.0rem;
        --sub_nav-img-height: 33px;
        --link_01-top: 13px;
        --link_01-right: 151px;
        --link_02-top: 0px;
        --link_02-right: 20px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #sub_nav {
        --sub_nav-top: 1056px;
        --sub_nav-width: 140px;
        --sub_nav-height: 80px;
        --sub_nav-a-font-size: 1.2rem;
        --sub_nav-img-height: 39px;
        --link_01-top: 13px;
        --link_01-right: 206px;
        --link_02-top: 0px;
        --link_02-right: 44px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #sub_nav {
        --sub_nav-top: 1195px;
        --sub_nav-width: 168px;
        --sub_nav-height: 104px;
        --sub_nav-a-font-size: 1.4rem;
        --sub_nav-img-height: 45px;
        --link_01-top: 15px;
        --link_01-right: 259px;
        --link_02-top: 0px;
        --link_02-right: 64px;
    }
}


/* first_block - third_block */
#first_block {
    width: 100%;
    height: 1178px;
    position: relative;
}
.sub_page #first_block {
    height: auto!important;
}
#second_block {
    position: relative;
    padding-bottom: 80px;
}
#third_block {
    width: 100%;
    position: relative;
    background-image: url(image/base/bg_group.svg);
    background-size: var(--third_block-background-size);
    background-repeat: no-repeat;
    background-position: center top;
    
    --third_block-background-size: 100% 175px;
}
@media (width >= 375px)  { /* 375-789 */
    #first_block { height: 1320px; }
    #third_block {
        --third_block-background-size: 100% 198px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #first_block { height: 1429px; }
    #third_block {
        --third_block-background-size: 100% 262px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #first_block { height: 1362px; }
    #third_block {
        --third_block-background-size: 100% 344px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #first_block { height: 1552px; }
    #third_block {
        --third_block-background-size: 100% 384px;
    }
}


/* panel */
.panel {
    & h1 {
        --font-min: 1.4;
        --font-max: 2.6;
        
        font-family: "Shippori Mincho", serif;
        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: 800;
        text-align: left;
        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);
    }
    & p {
        --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: 400;
    }
}
.panel {
    --panel-padding-bottom: 10px;
}
@media (width >= 375px)  { /* 375-789 */
    .panel {
        --panel-padding-bottom: 11px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .panel {
        --panel-padding-bottom: 12px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .panel {
        --panel-padding-bottom: 14px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .panel {
        --panel-padding-bottom: 16px;
    }
}


/* top_concept */
.top_concept {
    overflow: hidden;
    .curve_image {
        width: 100%;
        height: 100%;
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .top_concept_text {
            position: absolute;
            z-index: 3;
            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;
            transition: 0.2s;
            & h2,
            & p {
                opacity: 0.2;
                transform: translateY(100px) scale(0.95);
                transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
            }
            & h2 {
                --font-min: 1.2;
                --font-max: 2.5;
                
                font-family: "Shippori Mincho", serif;
                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)
                );
                margin-bottom: var(--top_concept-h2-margin-bottom);
                span {
                    margin-right: 10px;
                }
            }
            & p {
                --font-min: 0.8;
                --font-max: 1.5;
                
                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)
                );
                transition-delay: 0.2s;
            }
        }
    }
    .curve_container_clip {
        width: 0;
        height: 0;
        position: absolute;
        pointer-events: none;
    }
}
.top_concept.is-active .top_concept_text h2,
.top_concept.is-active .top_concept_text p {
    opacity: 1;
    transform: translateY(0);
}
.top_concept_01 {
    position: absolute;
    top: var(--top_concept-01-top);
    width: 100%;
    height: var(--top_concept-01-height);
    .curve_image_01 {
        & img {
            clip-path: var(--top_concept-01-clip-path);
            -webkit-clip-path: var(--top_concept-01-clip-path);
            object-position: center;
        }
        .top_concept_text {
            top: var(--top_concept-01-text-top);
            width: var(--top_concept-01-text-width);
            left: auto;
            right: var(--top_concept-01-text-right);
            h2 {
                span { color: #00A269; }
            }
        }
    }
}
.top_concept_02 {
    position: absolute;
    top: var(--top_concept-02-top);
    left: 0px;
    width: var(--top_concept-02-width);
    height: var(--top_concept-02-height);
    .curve_image_02 {
        & img {
            clip-path: var(--top_concept-02-clip-path);
            -webkit-clip-path: var(--top_concept-02-clip-path);
            object-position: center bottom;
        }
        .top_concept_text {
            top: var(--top_concept-02-text-top);
            width: var(--top_concept-02-text-width);
            left: var(--top_concept-02-text-left);
            right: auto;
            & h2 {
                span { color: #D59620; }
            }
        }
    }
}
.top_concept_03 {
    position: absolute;
    top: var(--top_concept-03-top);
    right: 0px;
    width: var(--top_concept-03-width);
    height: var(--top_concept-03-height);
    .curve_image_03 {
        & img {
            clip-path: var(--top_concept-03-clip-path);
            -webkit-clip-path: var(--top_concept-03-clip-path);
            object-position: center;
        }
        .top_concept_text {
            top: var(--top_concept-03-text-top);
            width: var(--top_concept-03-text-width);
            left: auto;
            right: var(--top_concept-03-text-right);
            h2 {
                span { color: #614CD8; }
            }
        }
    }
}
.top_concept {
    --top_concept-h2-margin-bottom: 8px;
    --top_concept-01-clip-path: url(#clip_narrow_01);
    --top_concept-01-top: 204px;
    --top_concept-01-height: 356px;
    --top_concept-01-text-top: 59px;
    --top_concept-01-text-width: calc(100% - 40px);
    --top_concept-01-text-right: 20px;
    --top_concept-02-clip-path: url(#clip_narrow_02);
    --top_concept-02-top: 498px;
    --top_concept-02-width: 100%;
    --top_concept-02-height: 354px;
    --top_concept-02-text-top: 53px;
    --top_concept-02-text-width: calc(100% - 40px);
    --top_concept-02-text-left: 20px;
    --top_concept-03-clip-path: url(#clip_narrow_03);
    --top_concept-03-top: 820px;
    --top_concept-03-width: 100%;
    --top_concept-03-height: 340px;
    --top_concept-03-text-top: 57px;
    --top_concept-03-text-width: calc(100% - 40px);
    --top_concept-03-text-right: 20px;
}
@media (width >= 375px)  { /* 375-789 */
    .top_concept {
        --top_concept-h2-margin-bottom: 10px;
        --top_concept-01-clip-path: url(#clip_narrow_01);
        --top_concept-01-top: 204px;
        --top_concept-01-height: 426px;
        --top_concept-01-text-top: 59px;
        --top_concept-01-text-width: 300px;
        --top_concept-01-text-right: calc(50% - 150px);
        --top_concept-02-clip-path: url(#clip_narrow_02);
        --top_concept-02-top: 560px;
        --top_concept-02-width: 100%;
        --top_concept-02-height: 400px;
        --top_concept-02-text-top: 87px;
        --top_concept-02-text-width: 300px;
        --top_concept-02-text-left: calc(50% - 150px);
        --top_concept-03-clip-path: url(#clip_narrow_03);
        --top_concept-03-top: 915px;
        --top_concept-03-width: 100%;
        --top_concept-03-height: 396px;
        --top_concept-03-text-top: 60px;
        --top_concept-03-text-width: 300px;
        --top_concept-03-text-right: calc(50% - 150px);
    }
}
@media (width >= 790px)  { /* 790-999 */
    .top_concept {
        --top_concept-h2-margin-bottom: 14px;
        --top_concept-01-clip-path: url(#clip_width_01);
        --top_concept-01-top: 208px;
        --top_concept-01-height: 466px;
        --top_concept-01-text-top: 97px;
        --top_concept-01-text-width: 310px;
        --top_concept-01-text-right: calc(50% - 338px);
        --top_concept-02-clip-path: url(#clip_width_02);
        --top_concept-02-top: 593px;
        --top_concept-02-width: 100%;
        --top_concept-02-height: 449px;
        --top_concept-02-text-top: 84px;
        --top_concept-02-text-width: 344px;
        --top_concept-02-text-left: calc(50% - 27px);
        --top_concept-03-clip-path: url(#clip_width_03);
        --top_concept-03-top: 1004px;
        --top_concept-03-width: 100%;
        --top_concept-03-height: 408px;
        --top_concept-03-text-top: 57px;
        --top_concept-03-text-width: 309px;
        --top_concept-03-text-right: calc(50% - 32px);
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .top_concept {
        --top_concept-h2-margin-bottom: 16px;
        --top_concept-01-clip-path: url(#clip_width_01);
        --top_concept-01-top: 15px;
        --top_concept-01-height: 545px;
        --top_concept-01-text-top: 167px;
        --top_concept-01-text-width: 393px;
        --top_concept-01-text-right: calc(50% - 481px);
        --top_concept-02-clip-path: url(#clip_width_02);
        --top_concept-02-top: 522px;
        --top_concept-02-width: calc(50% - 76px);
        --top_concept-02-height: 790px;
        --top_concept-02-text-top: 229px;
        --top_concept-02-text-width: 366px;
        --top_concept-02-text-left: calc(50% - 182px);
        --top_concept-03-clip-path: url(#clip_width_03);
        --top_concept-03-top: 910px;
        --top_concept-03-width: calc(50% + 19px);
        --top_concept-03-height: 408px;
        --top_concept-03-text-top: 210px;
        --top_concept-03-text-width: 330px;
        --top_concept-03-text-right: calc(50% - 88px);
    }
}
@media (width >= 1400px) { /* 1400over */
    .top_concept {
        --top_concept-h2-margin-bottom: 20px;
        --top_concept-01-clip-path: url(#clip_width_01);
        --top_concept-01-top: 32px;
        --top_concept-01-height: 610px;
        --top_concept-01-text-top: 192px;
        --top_concept-01-text-width: 455px;
        --top_concept-01-text-right: calc(50% - 660px);
        --top_concept-02-clip-path: url(#clip_width_02);
        --top_concept-02-top: 622px;
        --top_concept-02-width: calc(50% - 110px);
        --top_concept-02-height: 897px;
        --top_concept-02-text-top: 212px;
        --top_concept-02-text-width: 465px;
        --top_concept-02-text-left: calc(50% - 221px);
        --top_concept-03-clip-path: url(#clip_width_03);
        --top_concept-03-top: 1021px;
        --top_concept-03-width: calc(50% + 6px);
        --top_concept-03-height: 500px;
        --top_concept-03-text-top: 262px;
        --top_concept-03-text-width: 400px;
        --top_concept-03-text-right: calc(50% - 100px);
    }
}


/* button_detail */
.button_detail {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
    & 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: 900;
        color: #fff;
        background-color: #228d34;
        text-decoration: none;
        text-align: center;
        display: block;
        width: var(--button_detail-width);
        height: auto;
        padding-top: var(--button_detail-padding-top);
        padding-bottom: var(--button_detail-padding-bottom);
        margin-left: auto;
        margin-right: auto;
        border-radius: 10px;
        &:hover {
            background-color: #f60;
        }
        & span {
            font-size: 80%;
            padding-left: 6px;
        }
    }
}
.button_detail {
    --button_detail-width: 100px;
    --button_detail-padding-top: 2px;
    --button_detail-padding-bottom: 2px;
}
@media (width >= 375px)  { /* 375-789 */
    .button_detail {
        --button_detail-width: 120px;
        --button_detail-padding-top: 2px;
        --button_detail-padding-bottom: 2px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .button_detail {
        --button_detail-width: 140px;
        --button_detail-padding-top: 2px;
        --button_detail-padding-bottom: 2px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .button_detail {
        --button_detail-width: 160px;
        --button_detail-padding-top: 4px;
        --button_detail-padding-bottom: 4px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .button_detail {
        --button_detail-width: 200px;
        --button_detail-padding-top: 5px;
        --button_detail-padding-bottom: 5px;
    }
}


/* 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: 0px; --panel_01-text-right: 20px;
    --panel_01-text-width: calc(100% - 40px);
}
@media (width >= 375px)  { /* 375-789 */
    .panel_01_text {
        --panel_01-text-top: 0px; --panel_01-text-right: 20px;
        --panel_01-text-width: calc(100% - 40px);
    }
}
@media (width >= 790px)  { /* 790-999 */
    .panel_01_text {
        --panel_01-text-top: 0px; --panel_01-text-right: 50px;
        --panel_01-text-width: calc(100% - 100px);
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .panel_01_text {
        --panel_01-text-top: 606px; --panel_01-text-right: calc(50% - 462px);
        --panel_01-text-width: 480px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .panel_01_text {
        --panel_01-text-top: 700px; --panel_01-text-right: calc(50% - 700px);
        --panel_01-text-width: 702px;
    }
}


/* 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-min: 1.2;
        --font-max: 2.0;
        
        font-family: "Shippori Mincho", serif;
        font-weight: 800;
        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;
        padding-top: var(--news_area-h1-padding-top);
        padding-bottom: var(--news_area-h1-padding-bottom);
    }
    .news {
        float: left;
        width: var(--news_area-news-width);
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: calc(var(--news_area-news-width) * 0.13);
        position: relative;
        transition: 0.2s;
        .news_image {
            width: 100%;
            height: auto;
            & img {
                width: 100%;
                height: var(--news_area-news-image-height);
                object-fit: cover;
                object-position: center center;
                vertical-align:top;
                overflow: hidden;
                border: solid 1px #cbcaca;
                border-radius: 10px;
            }
        }
    }
    & time {
        --font-min: 0.7;
        --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)
        );
        color: #412e11;
        display: block;
        clear: both;
        padding-top: var(--news_area-time-padding-top);
    }
    & 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)
        );
    }
    & a {
        font-weight: normal;
        color: #000;
        text-decoration: none;
        display: block;
        &:hover {
            color: #f60;
        }
    }
    .cat_icon {
        --font-min: 0.6;
        --font-max: 1.0;
        
        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;
        width: var(--news_area-cat-icon-width);
        padding-top: 2px;
        padding-bottom: 2px;
        position: absolute;
        top: 0px;
        right: -5px;
        border-radius: 5px;
        &.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_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-padding-top: 29px; --news_area-h1-padding-bottom: 17px;
    --news_area-news-width: calc(100% / 2 - 20px); --news_area-news-image-height: 95px; --news_area-time-padding-top: 5px;
    --news_area-cat-icon-width: 52px;
}
.subpage .news_area {
    --news_area-news-width: calc(100% / 2 - 20px); 
}
@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: 22px;
        --news_area-h1-padding-top: 55px; --news_area-h1-padding-bottom: 19px;
        --news_area-news-width: calc(100% / 2 - 20px); --news_area-news-image-height: 115px;--news_area-time-padding-top: 6px;
        --news_area-cat-icon-width: 52px;
    }
    .subpage .news_area {
        --news_area-news-width: calc(100% / 2 - 20px); 
    }
}
@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: 22px;
        --news_area-h1-padding-top: 55px; --news_area-h1-padding-bottom: 19px;
        --news_area-news-width: calc(100% / 2 - 20px); --news_area-news-image-height: 218px;--news_area-time-padding-top: 7px;
        --news_area-cat-icon-width: 62px;
    }
    .subpage .news_area {
        --news_area-news-width: calc(100% / 2 - 20px); 
    }
}
@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: 20px;
        --news_area-h1-padding-top: 59px; --news_area-h1-padding-bottom: 23px;
        --news_area-news-width: calc(100% / 4 - 20px); --news_area-news-image-height: 157px;--news_area-time-padding-top: 8px;
        --news_area-cat-icon-width: 65px;
    }
    .subpage .news_area {
        --news_area-news-width: calc(100% / 4 - 20px); 
    }
}
@media (width >= 1400px) { /* 1400over */
    .news_area {
        --news_area-width: 1400px; --news_area-margin-left: auto; --news_area-margin-right: auto; --news_area-margin-bottom: 25px;
        --news_area-h1-padding-top: 59px; --news_area-h1-padding-bottom: 27px;
        --news_area-news-width: calc(100% / 4 - 20px); --news_area-news-image-height: 210px;--news_area-time-padding-top: 10px;
        --news_area-cat-icon-width: 78px;
    }
    .subpage .news_area {
        --news_area-news-width: calc(100% / 4 - 20px); 
    }
}


/* panel_03 */
.group_area {
    width: var(--group_area-width);
    height: auto;
    margin-left: var(--group_area-margin-left);
    margin-right: var(--group_area-margin-right);
    overflow: hidden;
    position: relative;
    padding-top: var(--group_area-padding-top);
    & h1 {
        text-align: center;
    }
    & p {
        text-align: center;
        margin-bottom: var(--group_area-p-margin-bottom);
    }
    .group {
        text-align: center;
        float: left;
        width: var(--group_area-group-width);
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 20px;
        transition: 0.2s;
        .group_image {
            width: auto;
            height: var(--group_image-height);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            border: solid 2px #c0c0c0;
            border-radius: 10px;
        }
        & h2 {
            --font-min: 1.0;
            --font-max: 1.6;
            
            font-family: "Shippori Mincho", serif;
            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)
            );
            padding-top: var(--group-h2-padding-top);
            padding-bottom: var(--group-h2-padding-bottom);
        }
        & p {
            --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)
            );
            text-align: left;
        }
        .group_image_01 {
            background-image: url(image/base/guide_image_01.webp);
        }
        .group_image_02 {
            background-image: url(image/base/guide_image_02.webp);
        }
        .group_image_03 {
            background-image: url(image/base/guide_image_03.webp);
        }
        .group_image_04 {
            background-image: url(image/base/guide_image_04.webp);
        }
    }
}
.group_area {
    --group_area-width: calc(100% - 20px);
    --group_area-margin-left: auto;
    --group_area-margin-right: auto;
    --group_area-padding-top: 80px;
    --group_area-p-margin-bottom: 15px;
    --group_area-group-width: calc(100% / 2 - 20px);
    --group_image-height: 90px;
    --group-h2-padding-top: 10px;
    --group-h2-padding-bottom: 5px;
}
@media (width >= 375px)  { /* 375-789 */
    .group_area {
        --group_area-width: calc(100% - 20px);
        --group_area-margin-left: 10px;
        --group_area-margin-right: 10px;
        --group_area-padding-top: 85px;
        --group_area-p-margin-bottom: 20px;
        --group_area-group-width: calc(100% / 2 - 20px);
        --group_image-height: 100px;
        --group-h2-padding-top: 12px;
        --group-h2-padding-bottom: 6px;
    }
}
@media (width >= 790px)  { /* 790-999 */
    .group_area {
        --group_area-width: calc(100% - 20px);
        --group_area-margin-left: 10px;
        --group_area-margin-right: 10px;
        --group_area-padding-top: 90px;
        --group_area-p-margin-bottom: 25px;
        --group_area-group-width: calc(100% / 2 - 20px);
        --group_image-height: 120px;
        --group-h2-padding-top: 14px;
        --group-h2-padding-bottom: 8px;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .group_area {
        --group_area-width: 1000px;
        --group_area-margin-left: auto;
        --group_area-margin-right: auto;
        --group_area-padding-top: 100px;
        --group_area-p-margin-bottom: 30px;
        --group_area-group-width: calc(100% / 4 - 20px);
        --group_image-height: 180px;
        --group-h2-padding-top: 16px;
        --group-h2-padding-bottom: 10px;
    }
}
@media (width >= 1400px) { /* 1400over */
    .group_area {
        --group_area-width: 1400px;
        --group_area-margin-left: auto;
        --group_area-margin-right: auto;
        --group_area-padding-top: 110px;
        --group_area-p-margin-bottom: 40px;
        --group_area-group-width: calc(100% / 4 - 20px);
        --group_image-height: 200px;
        --group-h2-padding-top: 18px;
        --group-h2-padding-bottom: 12px;
    }
}


/* under_theme */
#under_theme {
    width: 100%;
    height: var(--under_theme-height);
    overflow: hidden;
    .under_theme_image {
        width: 100%;
        height: 100%;
        & img {
            clip-path: url(#clip_under_theme);
            -webkit-clip-path: url(#clip_under_theme);
            object-position: center;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .curve_container_clip {
        width: 0;
        height: 0;
        position: absolute;
        pointer-events: none;
    }
}
#under_theme { 
    --under_theme-height: 200px; 
}
@media (width >= 375px)  { /* 375-789 */
    #under_theme { --under_theme-height: 300px; }
}
@media (width >= 790px)  { /* 790-999 */
    #under_theme { --under_theme-height: 400px; }
}
@media (width >= 1000px) { /* 1000-1400 */
    #under_theme { --under_theme-height: 500px; }
}
@media (width >= 1400px) { /* 1400over */
    #under_theme { --under_theme-height: 600px; }
}


/* 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: 30px;
    padding-bottom: 20px;
    overflow: hidden;
    #company_area {
        text-align: center;
        overflow: hidden;
        width: 100%;
        padding-bottom: 30px;
        .company_name {
            overflow: hidden;
            width: var(--company_name-width);
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 10px;
            & a {
                color: #000;
                text-decoration: none;
                display: block;
                &:hover {
                    color: #f60;
                }
                .under_logo {
                    display: block;
                    width: 100%;
                    height: var(--under_logo-height);
                    background-image: url(image/base/logo.svg);
                    background-size: var(--under_logo-width) auto;
                    background-repeat: no-repeat;
                    background-position: center center;
                    transition: 0.2s;
                }
                & small {
                    --font-min: 0.9;
                    --font-max: 1.6;
                    
                    font-family: "Shippori Mincho", serif;
                    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: 800;
                    display: block;
                }
            }
        }
        .company_addres {
            --font-min: 0.9;
            --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)
            );
            padding-top: var(--company_addres-padding-top);
            padding-bottom: 2px;
            & span {
                margin-right: 5px;
            }
        }
    }
    #company_profile {
        --font-min: 0.9;
        --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;
        overflow: hidden;
        width: var(--company_profile-width);
        height: auto;
        padding-top: 20px;
        margin-left: auto;
        margin-right: auto;
        border-top: solid 1px #25825c;
    }
}
#company_area_spc {
    --company_area_spc-width: calc(100% - 20px);
    --company_area_spc-left: 10px;
    --company_area_spc-right: 10px;
    --company_name-width: 175px;
    --under_logo-width: 131px;
    --under_logo-height: 84px;
    --company_addres-padding-top: 2px;
    --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_name-width: 230px;
        --under_logo-width: 138px;
        --under_logo-height: 92px;
        --company_addres-padding-top: 5px;
        --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_name-width: 247px;
        --under_logo-width: 190px;
        --under_logo-height: 116px;
        --company_addres-padding-top: 9px;
        --company_profile-width: calc(100% - 20px);
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #company_area_spc {
        --company_area_spc-width: 1000px;
        --company_area_spc-left: auto;
        --company_area_spc-right: auto;
        --company_name-width: 309px;
        --under_logo-width: 210px;
        --under_logo-height: 130px;
        --company_addres-padding-top: 13px;
        --company_profile-width: 820px;
    }
}
@media (width >= 1400px) { /* 1400over */
    #company_area_spc {
        --company_area_spc-width: 1400px;
        --company_area_spc-left: auto;
        --company_area_spc-right: auto;
        --company_name-width: 340px;
        --under_logo-width: 230px;
        --under_logo-height: 148px;
        --company_addres-padding-top: 16px;
        --company_profile-width: 900px;
    }
}


/* under_group_area */
#under_group_area {
    overflow: hidden;
    width: var(--under-group-area-width);
    margin-top: 40px;
    margin-left: var(--under-group-area-margin-left);
    margin-right: var(--under-group-area-margin-right);
    margin-bottom: 40px;
    .under_group_link {
        background-color: #f5fbf4;
        float: left;
        width: var(--under-group-link-width);
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 40px;
        border: solid 1px #25825c;
        border-radius: 10px;
        transition: 0.2s;
        & a {
            color: #000;
            text-align: center;
            display: block;
            text-decoration: none;
            &:hover {
                color: #f60;
            }
            & h3 {
                --font-min: 0.9;
                --font-max: 1.4;
                
                font-family: "Shippori Mincho", serif;
                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)
                );
                padding-bottom: 15px;
            }
            & li {
                --font-min: 0.9;
                --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)
                );
                padding-left: 10px;
                padding-right: 10px;
                span {
                    margin-right: 5px;
                }
            }
        }
    }
}
/* under_group_area */
#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% / 1 - 20px - 2px);
}
@media (width >= 375px)  { /* 375-789 */
    #under_group_area {
        --under-group-area-width: calc(100% - 20px);
        --under-group-area-margin-left: auto;
        --under-group-area-margin-right: auto;
        --under-group-link-width: calc(100% / 1 - 20px - 2px);
    }
}
@media (width >= 790px)  { /* 790-999 */
    #under_group_area {
        --under-group-area-width: calc(100% - 20px);
        --under-group-area-margin-left: auto;
        --under-group-area-margin-right: auto;
        --under-group-link-width: calc(100% / 2 - 20px - 2px);
    }
}
@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 - 2px);
    }
}
@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 - 2px);
    }
}


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


/* remodal over ride */
.remodal  {
    padding: 0px!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-min: 0.9;
        --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)
        );
        background-color: #228d34 !important;
        display: block !important;
        clear: both;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 10px;
        &:hover {
            background-color: #f60!important;
        }
    }
}
@media (width >= 375px)  { /* 375-789 */
    .remodal  {
        .remodal-close {
            right: 15px!important;
            &:before { font-size: 3rem!important; }
        }
    }
}
@media (width >= 790px)  { /* 790-999 */
    .remodal  {
        .remodal-close {
            right: 20px!important;
            &:before { font-size: 3.5rem!important; }
        }
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .remodal  {
        .remodal-close {
            right: 25px!important;
            &:before { font-size: 4rem!important; }
        }
    }
}
@media (width >= 1400px) { /* 1400over */
    .remodal  {
        .remodal-close {
            right: 30px!important;
            &:before { font-size: 5rem!important; }
        }
    }
}


/* modal-content */
.modal-content {
    margin-left: 20px;
    margin-right: 20px;
    & h1 {
        --font-min: 1.2;
        --font-max: 2.1;
        
        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.3;
        
        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-ul-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.8;
                --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-family: "Shippori Mincho", serif;
                font-style: normal;
                display: block;
            }
            .modal_nav_image {
                width: 100%;
                height: var(--modal_nav_image-height);
                display: block;
                margin-bottom: 10px;
                border-radius: 10px;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                border: solid 1px #c0c0c0;
            }
            .modal_nav_image_01 {
                background-image: url(image/base/guide_image_01.webp);
            }
            .modal_nav_image_02 {
                background-image: url(image/base/guide_image_02.webp);
            }
            .modal_nav_image_03 {
                background-image: url(image/base/guide_image_03.webp);
            }
            .modal_nav_image_04 {
                background-image: url(image/base/guide_image_04.webp);
            }
            .modal_nav_image_05 {
                background-image: url(image/base/water_guide_image_01.webp);
            }
            .modal_nav_image_06 {
                background-image: url(image/base/water_guide_image_02.webp);
            }
            .modal_nav_image_07 {
                background-image: url(image/base/water_guide_image_03.webp);
            }
            .modal_nav_image_08 {
                background-image: url(image/base/water_guide_image_04.webp);
            }
            .modal_nav_image_09 {
                background-image: url(image/base/water_guide_image_05.webp);
            }
            .modal_nav_image_10 {
                background-image: url(image/base/water_guide_image_06.webp);
            }
        }
    }
    ul.modal_nav_first li {
        width: var(--modal_nav_first-width);
        margin-left: var(--modal_nav_first-margin-left);
        margin-right: auto;
    }
    ul.modal_nav_second li {
        width: var(--modal_nav_second-width);
    }
    ul.modal_nav_third li {
        width: var(--modal_nav_third-width);
    }
    ul.modal_nav_forth li {
        width: var(--modal_nav_forth-width);
    }
}
.modal-content {
    --modal-content-ul-margin-bottom: 40px;
    --modal_nav_image-height: 160px;
    --modal_nav_first-width: 120px;
    --modal_nav_first-margin-left: calc(50% - 60px);
    --modal_nav_second-width: calc(100% / 1 - 20px);
    --modal_nav_third-width: calc(100% / 1 - 20px);
    --modal_nav_forth-width: calc(100% / 1 - 20px);
}
@media (width >= 375px)  { /* 375-789 */
    .modal-content {
        --modal-content-ul-margin-bottom: 30px;
        --modal_nav_image-height: 150px;
        --modal_nav_first-width: 150px;
        --modal_nav_first-margin-left: calc(50% - 75px);
        --modal_nav_second-width: calc(100% / 2 - 20px);
        --modal_nav_third-width: calc(100% / 2 - 20px);
        --modal_nav_forth-width: calc(100% / 2 - 20px);
    }
}
@media (width >= 790px)  { /* 790-999 */
    .modal-content {
        --modal-content-ul-margin-bottom: 30px;
        --modal_nav_image-height: 150px;
        --modal_nav_first-width: 170px;
        --modal_nav_first-margin-left: calc(50% - 85px);
        --modal_nav_second-width: calc(100% / 4 - 20px);
        --modal_nav_third-width: calc(100% / 2 - 20px);
        --modal_nav_forth-width: calc(100% / 2 - 20px);
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .modal-content {
        --modal-content-ul-margin-bottom: 30px;
        --modal_nav_image-height: 150px;
        --modal_nav_first-width: 210px;
        --modal_nav_first-margin-left: calc(50% - 105px);
        --modal_nav_second-width: calc(100% / 4 - 20px);
        --modal_nav_third-width: calc(100% / 3 - 20px);
        --modal_nav_forth-width: calc(100% / 2 - 20px);
    }
}
@media (width >= 1400px) { /* 1400over */
    .modal-content {
        --modal-content-ul-margin-bottom: 40px;
        --modal_nav_image-height: 160px;
        --modal_nav_first-width: 250px;
        --modal_nav_first-margin-left: calc(50% - 125px);
        --modal_nav_second-width: calc(100% / 4 - 20px);
        --modal_nav_third-width: calc(100% / 3 - 20px);
        --modal_nav_forth-width: calc(100% / 3 - 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%;
        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: #80a0af;
    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: #b48319;
    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: #80a0af;
}
.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;
    }
}