/* water dev */

#scroll_block_area {
    padding-top: 10px;
    .scroll_block {
        width: 100%;
        position: relative;
        clear: both;
        padding-top: 40px;
        padding-bottom: 40px;
        overflow: hidden;
        border-bottom: solid 3px #3399ca;
        h2 {
            --font-min: 1.3;
            --font-max: 2.7;
            
            font-family: "Shippori Mincho", serif;
            transform: rotate(0.05deg);
            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: 40px;
        }
        p {
            --font-min: 0.9;
            --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)
            );
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
        }
        .scroll_left_image {
            width: var(--scroll_left_image-width);
            height: var(--scroll_left_image-height);
            float: var(--scroll_left_image-float);
            overflow: hidden;
            border-radius: 10px;
            img {
                object-fit: cover;
                object-position: center center;
                width: 100%;
                height: auto;
            }
        }
        .scroll_right_detail {
            width: var(--scroll_right_detail-width);
            height: var(--scroll_right_detail-height);
            float: var(--scroll_right_detail-float);
        }
        .scroll_right_image {
            width: var(--scroll_right_image-width);
            height: var(--scroll_right_image-height);
            float: var(--scroll_right_image-float);
            overflow: hidden;
            img {
                object-fit: cover;
                object-position: center center;
            }
        }
        .scroll_left_detail {
            width: var(--scroll_left_detail-width);
            height: var(--scroll_left_detail-height);
            float: var(--scroll_left_detail-float);
        }
        .scroll_center_detail {
            width: 100%;
            height: auto;
            text-align: center;
            padding-bottom: 20px;
        }
        .scroll_center_image {
            width: 100%;
            height: auto;
            background-color: #a2c24d;
        }
    }
}
#scroll_block_area {
    --scroll_left_image-width: 100%;
    --scroll_left_image-height: auto;
    --scroll_left_image-float: none;
    --scroll_right_detail-width: 100%;
    --scroll_right_detail-height: auto;
    --scroll_right_detail-float: none;
    --scroll_right_image-width: 100%;
    --scroll_right_image-height: 400px;
    --scroll_right_image-float: none;
    --scroll_left_detail-width: 100%;
    --scroll_left_detail-height: auto;
    --scroll_left_detail-float: none;
}
@media (width >= 375px)  { /* 375-789 */
    #scroll_block_area {
        --scroll_left_image-width: 100%;
        --scroll_left_image-height: 400px;
        --scroll_left_image-float: none;
        --scroll_right_detail-width: 100%;
        --scroll_right_detail-height: 400px;
        --scroll_right_detail-float: none;
        --scroll_right_image-width: 100%;
        --scroll_right_image-height: 400px;
        --scroll_right_image-float: none;
        --scroll_left_detail-width: 100%;
        --scroll_left_detail-height: 400px;
        --scroll_left_detail-float: none;
    }
}
@media (width >= 790px)  { /* 790-999 */
    #scroll_block_area {
        --scroll_left_image-width: 50%;
        --scroll_left_image-height: 400px;
        --scroll_left_image-float: left;
        --scroll_right_detail-width: 50%;
        --scroll_right_detail-height: 400px;
        --scroll_right_detail-float: right;
        --scroll_right_image-width: 50%;
        --scroll_right_image-height: 400px;
        --scroll_right_image-float: right;
        --scroll_left_detail-width: 50%;
        --scroll_left_detail-height: 400px;
        --scroll_left_detail-float: left;
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    #scroll_block_area {
        --scroll_left_image-width: 50%;
        --scroll_left_image-height: 400px;
        --scroll_left_image-float: left;
        --scroll_right_detail-width: 50%;
        --scroll_right_detail-height: 400px;
        --scroll_right_detail-float: right;
        --scroll_right_image-width: 50%;
        --scroll_right_image-height: 400px;
        --scroll_right_image-float: right;
        --scroll_left_detail-width: 50%;
        --scroll_left_detail-height: 400px;
        --scroll_left_detail-float: left;
    }
}
@media (width >= 1400px) { /* 1400over */
    #scroll_block_area {
        --scroll_left_image-width: 50%;
        --scroll_left_image-height: 400px;
        --scroll_left_image-float: left;
        --scroll_right_detail-width: 50%;
        --scroll_right_detail-height: 400px;
        --scroll_right_detail-float: right;
        --scroll_right_image-width: 50%;
        --scroll_right_image-height: 400px;
        --scroll_right_image-float: right;
        --scroll_left_detail-width: 50%;
        --scroll_left_detail-height: 400px;
        --scroll_left_detail-float: left;
    }
}


#water_block_area {
    width: calc(100% - 20px);
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    height: auto;
    .water_block {
        --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)
        );
        transform: rotate(0.05deg);
        width: calc(100% / 3 - 10px);
        height: 100px;
        border-radius: 10px;
        text-align: center;
        position: absolute;
        color: #fff;
        margin-left: 5px;
        margin-right: 5px;
        a {
            text-decoration: none;
            color: #fff;
            &:hover {
                color: #f60;
            }
        }
        em {
            font-style: normal;
            display: block;
        }
        small {
            font-size: 60%;
            display: block;
        }
        &.water_block_01 {
            top: 0px;
            left: 0px;
            right: auto;
            background-color: #663399;
        }
        &.water_block_02 {
            top: 110px;
            left: 0px;
            right: auto;
            background-color: #6666CC;
        }
        &.water_block_03 {
            top: 110px;
            left: calc(100% / 3);
            right: auto;
            background-color: #3399FF;
        }
        &.water_block_04 {
            top: 110px;
            left: auto;
            right: 0px;
            background-color: #FF9900;
        }
        &.water_block_05 {
            top: 220px;
            left: auto;
            right: 0px;
            background-color: #FF6633;
        }
    }
}
.spec_block {
    --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)
    );
    float: left;
    width: calc(100% / 2 - 20px);
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    text-align: center;
    .spec_block_image {
        width: 100%;
        height: auto;
        overflow: hidden;
        img {
            width: 100%;
            height: auto;
            object-fit: cover;
            object-position: center center;
            vertical-align: bottom;
        }
    }
    em {
        transform: rotate(0.05deg);
        font-style: normal;
        display: block;
        padding-top: 10px;
    }
    small {
        font-size: 70%;
        display: block;
        padding-top: 10px;
    }
}
@media (width >= 375px)  { /* 375-789 */
    .spec_block {
        width: calc(100% / 2 - 20px);
    }
}
@media (width >= 790px)  { /* 790-999 */
    .spec_block {
        width: calc(100% / 2 - 20px);
    }
}
@media (width >= 1000px) { /* 1000-1400 */
    .spec_block {
        width: calc(100% / 4 - 20px);
    }
}
@media (width >= 1400px) { /* 1400over */
    .spec_block {
        width: calc(100% / 4 - 20px);
    }
}