@charset 'UTF-8';


@media screen and (max-width: 640px) {

    .sp-s_none {
        display: none;
    }
}


@media screen and (max-width: 767px) {

    .sp_none {
        display: none;
    }

    .max-area {
        width: 100%;
        margin: 0 auto;
        padding: 0 0 15vw;
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%);
    }

    .menu-bar-area {
        width: 100%;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;
    }

    .menu-bar-con {
        width: 50px;
        height: 50px;
    }

    #menu-bar {
        position: absolute;
        top: 20px;
        right: 15px;
        width: 40px;
        height: 40px;
        z-index: 999;
    }

    #menu-bar span {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 40px;
        height: 3px;
        background: #ffffff;
        transition: all 0.3s ease-out;
    }

    #menu-bar .menu-bar01 {
        top: 12px;
    }

    #menu-bar .menu-bar02 {
        top: 24px;
    }

    #menu-bar .menu-bar03 {
        bottom: 36px;
    }

    #menu-bar.nav-active .menu-bar01 {
        top: 12px;
        transform: rotate(45deg);
    }

    #menu-bar.nav-active .menu-bar02 {
        opacity: 0;
    }

    #menu-bar.nav-active .menu-bar03 {
        top: 12px;
        transform: rotate(135deg);
    }

    body.nav-fixed {
        position: fixed;
        width: 100%;
        height: 100%
    }

    .navi-area-sp {
        width: 100%;
    }

    #navi-sp {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 888;
        width: 100%;
        opacity: 0;
        /*background-color: rgba(0, 0, 0, 1);*/
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%);
        visibility: hidden;
        transition: all .3s ease-out;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #navi-sp.nav-active {
        opacity: 1;
        visibility: visible;
        overflow-y: scroll;
    }

    .navi-inner {
        width: 90%;
        margin: 0 auto 0;
        padding-bottom: 15vw;
    }

    .navi-menu {
        padding: 1.375em 0 0;
        text-align: center;
        /*350-767,24-32*/
        font-size: clamp(1.5rem, 1.08rem + 1.92vw, 2rem);
        font-weight: 600;
        line-height: 1.5em;
        color: #ffffff;
        position: relative;
    }

    .navi-menu a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .navi-area {
        display: none;
    }

    .contents-area {
        width: 100%;
        margin: 0 auto 0;
        padding: 0;
        position: relative;
    }

    .main-area {
        width: 100%;
        margin: 0 auto 0;
    }

    .main-top-con {
        width: 100%;
        margin: 0 auto 2.5%;
        display: flex;
    }

    .main-top01 {
        width: 25%;
        padding: 10% 0 0;
        /*background-color: rgba(0, 0, 0, 1);*/
    }

    .main-top01 img {
        width: 70%;
        margin: 0 auto 0;
    }

    .main-top02 {
        width: 50%;
        max-width: 360px;
        margin: -5% auto 0;
        /*padding: 2.5% 0 0;*/
        /*background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%);*/
    }

    .main-top02 img {
        width: 100%;
        margin: 0 auto 0;
    }

    .main-top03 {
        width: 25%;
        padding: 10% 0 0;
        /*background-color: rgba(255, 0, 0, 1);*/
    }

    .main-top03 img {
        width: 77%;
        margin: 0 auto 0;
    }

    .main-mid-con {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .main-mid01 {
        width: 50%;
        /*background: linear-gradient(40deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 100%);*/
        /*background-color: #000000;*/
        background-image: url("../images/bg-tri-red.svg");
        background-repeat: no-repeat;
        background-size: 90%;
        background-position: left -3px bottom -1px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-bottom: 2px solid #ffffff;
    }

    .main-mid02 {
        width: 50%;
        /*background: linear-gradient(320deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(255, 0, 0, 1) 30%, rgba(255, 0, 0, 1) 100%);*/
        /*background-color: #ff0000;*/
        background-image: url("../images/bg-tri-black.svg");
        background-repeat: no-repeat;
        background-size: 90%;
        background-position: right -3px bottom -1px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-bottom: 2px solid #ffffff;
    }

    .main-mid-copy01 {
        max-width: 90%;
        padding: 0 0.5em;
        text-align: center;
        /*350-767,10-16*/
        font-size: clamp(0.625rem, 0.31rem + 1.44vw, 1rem);
        font-weight: 800;
        color: #ff0000;
        background-color: #ffff00;
        display: flex;
        flex-grow: 1;
        align-items: center;
    }

    .main-mid-copy01.dummy {
        background-color: #000000;
    }

    .main-mid-copy02 {
        max-width: 90%;
        text-align: center;
        /*350-767,12-22*/
        font-size: clamp(0.75rem, 0.225rem + 2.4vw, 1.375rem);
        font-weight: 600;
        color: #ffffff;
    }

    .package2025-01,
    .package2025-02 {
        width: 80%;
        margin: 1% auto 0;
        padding-bottom: 7.2%;
    }

    /*.main-bottom-con {
        width: 100%;
        background-color: rgba(255, 255, 255, 0);
    }*/

    .kara-logo {
        width: 100%;
        background-color: rgba(255, 255, 255, 1);
    }

    .kara-logo img {
        width: 25%;
        margin: -12% 5% 0 auto;
    }

    #About {
        width: 100%;
        margin-top: 0%;
        background-color: #ffffff;
    }

    .about-block01 {
        width: 100%;
        margin: 0 auto;
        padding: 0 5% 7.5%;
        text-align: center;
    }

    .about-b01-copy01 {
        margin-bottom: 1em;
        /*350-767,24-36*/
        font-size: clamp(1.5rem, 0.871rem + 2.88vw, 2.25rem);
        font-weight: 700;
        line-height: 1.5em;
    }

    .about-b01-copy02 {
        /*350-767,16-24*/
        font-size: clamp(1rem, 0.58rem + 1.92vw, 1.5rem);
        font-weight: 500;
        text-align: left;
        display: inline-block;
    }

    .marker01 {
        margin: 0 0.375em;
        padding: 0 0.25em;
        color: #ffffff;
        background-color: #000000;
    }

    .marker02 {
        margin: 0 0.5em;
        padding: 0 0.25em;
        color: #ffffff;
        background-color: #e40012;
    }

    .about-block02,
    .about-block04 {
        width: 100%;
        margin: 0 auto;
        padding: 5% 5% 5%;
        text-align: center;
        background-color: #000000;
    }

    .about-b02-copy01,
    .about-b04-copy01 {
        /*350-767,20-28*/
        font-size: clamp(1.25rem, 0.83rem + 1.92vw, 1.75rem);
        font-weight: 700;
        color: #ffffff;
    }

    .about-block03 {
        width: 100%;
        margin: 0 auto;
        padding: 0 0 7.5%;
        text-align: center;
    }

    .about-b03-top {
        padding: 0;
        background: #ffedd0;
        position: relative;
    }

    .about-b03-top::before {
        content: "";
        position: absolute;
        height: 10%;
        width: 100%;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        background-color: #ffedd0;
        left: 0;
        bottom: -10%;
    }

    .img03-01 {
        width: 95%;
        margin: 0 auto 0;
        padding: 5% 0 0;
    }

    .about-b03-bottom {
        padding: 10% 5% 0;
    }

    .about-b03-copy01 {
        /*350-767,16-24*/
        font-size: clamp(1rem, 0.58rem + 1.92vw, 1.5rem);
        font-weight: 700;
    }

    .about-b03-copy01 span {
        font-size: 0.75em;
        vertical-align: top;
    }

    .about-b03-copy02 {
        margin-top: 0.5em;
        /*350-767,20-28*/
        font-size: clamp(1.25rem, 0.83rem + 1.92vw, 1.75rem);
        font-weight: 800;
        color: #e40012;
    }

    .about-b03-copy03 {
        width: 100%;
        margin: 1.5em 0 0;
        padding-left: 1em;
        text-indent: -1em;
        /*350-767,14-16*/
        font-size: clamp(0.875rem, 0.77rem + 0.48vw, 1rem);
        text-align: left;
        display: inline-block;
    }

    .about-block05 {
        width: 100%;
        margin: 0 auto;
        padding: 5% 0 5%;
    }

    .about-b05-top {
        width: 95%;
        margin: 0 auto 5%;
        display: flex;
    }

    .img03-02 {
        width: 50%;
        padding-right: 2.5%;
    }

    .img03-03 {
        width: 50%;
        padding-left: 2.5%;
    }

    .about-b05-bottom {
        width: 80%;
        margin: 0 auto 0;
        display: flex;
        flex-wrap: wrap;
    }

    .about-b05b-line01 {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .about-b05b-line01-left,
    .about-b05b-line02-left {
        width: 100%;
        margin-bottom: 5%;
    }

    .about-b05b-line01-right,
    .about-b05b-line02-right {
        width: 100%;
    }

    .about-b05b-copy01 {
        margin: 0 0 0.5em;
        padding: 0em 1.5em;
        /*350-767,16-24*/
        font-size: clamp(1rem, 0.58rem + 1.92vw, 1.5rem);
        font-weight: 800;
        text-align: center;
        color: #ffffff;
        background-color: #e40012;
        display: inline-block;
    }

    .about-b05b-copy02 {
        /*350-767,15-20*/
        font-size: clamp(0.938rem, 0.675rem + 1.2vw, 1.25rem);
    }

    .about-b05b-line02 {
        width: 100%;
        margin: 1.5em 0 0;
        display: flex;
        flex-direction: column;
    }

    .about-block06 {
        width: 100%;
        margin: 0 auto;
        padding: 5% 0 5%;
        background-color: #ffedd0;
    }

    .about-b06 {
        width: 90%;
        margin: 0 auto 0;
    }

    .about-b06-title {
        width: 100%;
        padding: 0em 1.5em;
        /*350-767,20-28*/
        font-size: clamp(1.25rem, 0.83rem + 1.92vw, 1.75rem);
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        background-color: #727171;
    }

    .img03-06 {
        width: 95%;
        margin: 5% auto 2.5%;
    }

    .about-b06-copy01 {
        width: 95%;
        margin: 0 auto 0;
        padding-left: 1em;
        text-indent: -1em;
        /*350-767,14-18*/
        font-size: clamp(0.875rem, 0.665rem + 0.96vw, 1.125rem);
    }

    #Product01 {
        width: 100%;
        background-color: #000000;
        padding: 0 0 10%;
    }

    #Product02 {
        width: 100%;
        background-color: #ff0000;
        padding: 0 0 10%;
    }

    .product01-block01,
    .product02-block01 {
        width: 100%;
        position: relative;
    }

    .p01-b01-steam,
    .p02-b01-steam {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    /* 湯気 */
    @keyframes steam01 {
        0% {
            bottom: 5%;
            filter: blur(8px);
            transform: rotateY(0deg);
            transform: scale(0.6, 1);
            opacity: 0
        }

        11% {
            opacity: 0.3
        }

        33% {
            transform: rotateY(40deg);
            transform: scale(1, 1.2);
            opacity: 0.8
        }

        66% {
            transform: rotateY(20deg);
            transform: scaleY(1.8, 1);
            opacity: 0.6
        }

        100% {
            /*bottom: 0;*/
            bottom: 100%;
            filter: blur(10px);
            transform: rotateY(60deg);
            transform: scaleY(2, 1.8);
            opacity: 0
        }
    }

    @keyframes steam02 {
        0% {
            bottom: -10%;
            filter: blur(8px);
            transform: rotateY(0deg);
            transform: scale(0.6, 0.6);
            opacity: 0
        }

        11% {
            opacity: 0.3
        }

        33% {
            transform: rotateY(40deg);
            transform: scale(0.8, 1);
            opacity: 0.7
        }

        66% {
            transform: rotateY(2deg);
            transform: scaleY(1, 1.2)
        }

        100% {
            bottom: 100%;
            filter: blur(10px);
            transform: rotateY(50deg);
            transform: scaleY(1.2, 1.4);
            opacity: 0
        }
    }

    .steam01 {
        position: absolute;
        right: 0;
        animation: steam01 10s infinite linear;
        opacity: 0
    }

    .steam02 {
        position: absolute;
        left: 7.5%;
        animation: steam02 14s infinite linear;
        opacity: 0
    }

    .steam03 {
        margin: auto;
        position: absolute;
        right: 0;
        left: 0;
        animation: steam02 12s infinite linear;
        animation-delay: 6s;
        opacity: 0
    }

    .steam01 img,
    .steam03 img {
        width: 250px;
        height: 400px;
    }

    .steam02 img {
        width: 200px;
        height: 300px;
    }

    .logo2025-01 {
        width: 60%;
        margin: 5% auto 7.5%;
    }

    .logo2025-02 {
        width: 62.8%;
        margin: -12.5% auto 7.5%;
        position: relative;
    }

    .product01-block02,
    .product02-block02 {
        width: 90%;
        margin: 0 auto 0;
        padding: 0 2.5%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .p01-b02-top,
    .p02-b02-top {
        width: 100%;
        margin-bottom: 5%;
    }

    .p01-b02-left,
    .p02-b02-left {
        width: 65%;
        padding: 0 2.5%;
    }

    .p01-b02-right {
        width: 35%;
        padding: 0 0 0 2.5%;
    }

    .p02-b02-right {
        width: 35%;
        padding: 0 0 0 2.5%;
    }

    .p01-b02-copy01,
    .p02-b02-copy01 {
        width: 100%;
        /*350-767,24-36*/
        font-size: clamp(1.5rem, 0.871rem + 2.88vw, 2.25rem);
        font-weight: 700;
        line-height: 1.5em;
        text-align: center;
        color: #ffffff;
    }

    .p02-b02-copy02 {
        width: 60%;
        margin: 0 auto 0.25em;
        /*350-767,16-24*/
        font-size: clamp(1rem, 0.58rem + 1.92vw, 1.5rem);
        font-weight: 700;
        line-height: 1.375em;
        text-align: center;
        color: #ffef00;
        background-image: url("../images/fukidashi01.png");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom;
    }

    .p01-niku {
        width: 85%;
        margin: 0 auto 0;
        padding-bottom: 45%;
    }

    .p02-niku {
        width: 95%;
        margin: 0 auto 0;
        padding-bottom: 45%;
    }

    .product01-block03,
    .product02-block03 {
        width: 90%;
        margin: -10% auto 0;
        padding: 2.5%;
        background-color: #ffffff;
        border-radius: 16px;
    }

    .p01-b03-inner {
        width: 100%;
        padding: 2.5% 2.5% 5%;
        border: 3px solid #000000;
    }

    .p02-b03-inner {
        width: 100%;
        padding: 2.5% 2.5% 5%;
        border: 3px solid #ff0000;
    }

    .p01-b03-line01,
    .p02-b03-line01 {
        width: 100%;
        margin: 0 auto 5%;
        display: flex;
    }

    .p01-b03-line01:first-child {
        margin: 12.5% auto 5%;
    }

    .p01-b03-line01:last-child {
        margin: 0 auto 0;
    }

    .p02-b03-line01:first-child {
        margin: 12.5% auto 5%;
    }

    .p02-b03-line01:last-child {
        margin: 0 auto 0;
    }

    .p01-b03-icon {
        width: 12.5%;
        margin-right: 2.5%;
        padding-top: 0.375em;
    }

    .p01-b03-icon img {
        width: 100%;
        margin: 0 auto 0;
    }

    .p02-b03-icon {
        width: 12.5%;
        margin-right: 2.5%;
        margin-top: 0em;
    }

    .p02-b03-icon img {
        width: 80%;
        margin: 0 auto 0;
    }

    .p01-b03-copy01,
    .p02-b03-copy01 {
        width: 100%;
        /*350-767,16-20*/
        font-size: clamp(1rem, 0.79rem + 0.96vw, 1.25rem);
        /*line-height: 1.5em;*/
    }

    .p01-b03-copy01 span {
        font-size: 0.625em;
        vertical-align: top;
    }

    .p02-b03-copy01 span.level3::after {
        content: '';
        display: inline-block;
        width: 3em;
        height: 1.25em;
        background-image: url("../images/level3.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .p01-b03-copy02 {
        width: 100%;
        padding-left: 1em;
        text-indent: -1em;
        /*350-767,14-18*/
        font-size: clamp(0.875rem, 0.665rem + 0.96vw, 1.125rem);
    }

    .product02-block04 {
        text-align: center;
        padding: 10% 0 0;
    }

    .p02-b04-copy01 {
        width: 90%;
        margin: 0 auto 0;
        /*350-767,17-25*/
        font-size: clamp(1.063rem, 0.643rem + 1.92vw, 1.563rem);
        font-weight: 700;
        color: #ffffff;
    }

    .p02-b04-copy02 {
        width: 90%;
        margin: 0.25em auto 0;
        /*350-767,24-36*/
        font-size: clamp(1.5rem, 0.871rem + 2.88vw, 2.25rem);
        font-weight: 700;
        line-height: 1.5em;
        color: #ffef00;
    }

    .p02-b04-copy03 {
        width: 90%;
        margin: 0 auto 0;
        /*350-767,18-26*/
        font-size: clamp(1.125rem, 0.705rem + 1.92vw, 1.625rem);
        font-weight: 700;
        line-height: 1.75em;
        color: #ffffff;
    }

    .img05-03 {
        margin: 5% 0 6%;
        padding-left: 5%;
    }

    .img05-04 {
        width: 80%;
        margin: 3% auto 0;
    }

    #Initiative {
        width: 100%;
        padding: 7.5% 0 10%;
        background-color: #ffffff;
    }

    .initiative-block01 {
        width: 94%;
        margin: 0 auto 0;
    }

    .ini-b01-copy01 {
        /*350-767,20-32*/
        font-size: clamp(1.25rem, 0.621rem + 2.88vw, 2rem);
        font-weight: 700;
        line-height: 1.675em;
        text-align: center;
    }

    .initiative-block02 {
        width: 90%;
        margin: 5% auto 5%;
        border: 8px solid;
        border-image: conic-gradient(#dbb133, #ffe691, #ffe380, #ffe691, #ffe380, #dbb133, #fccf00, #fccf00, #dbb133) 1;
        border-radius: 16px;
    }

    .ini-b02-copy01 {
        width: 100%;
        margin: 0 auto 0;
        padding: 2.5% 5%;
        /*350-767,15-22*/
        font-size: clamp(0.938rem, 0.57rem + 1.68vw, 1.375rem);
        font-weight: 700;
        color: #ffffff;
        background-color: #e40012;
        border-bottom: 8px solid;
        border-image: linear-gradient(to right, #fccf00, #ffe691) 1;
    }

    .img06-01 {
        width: 90%;
        margin: 0 auto 0;
        padding: 5% 0;
    }

    .initiative-block03 {
        width: 85%;
        margin: 0 auto 0;
    }

    .ini-b03-copy01 {
        /*350-767,16-24*/
        font-size: clamp(1rem, 0.58rem + 1.92vw, 1.5rem);
        font-weight: 500;
    }

    .bottom-main-area {
        width: 100%;
        margin: 5% auto 5%;
        padding-top: 5%;
        display: flex;
        flex-direction: column;
    }

    .bottom-main-top01 {
        width: 25%;
        padding: 10% 0 0;
    }

    .bottom-main-top01 img {
        width: 70%;
        margin: 0 auto 0;
    }

    .bottom-main-top02 {
        width: 50%;
        margin: -5% auto 0;
    }

    .bottom-main-top02 img {
        width: 100%;
        margin: 0 auto 0;
    }

    .bottom-main-top03 {
        width: 25%;
        padding: 10% 0 0;
    }

    .bottom-main-top03 img {
        width: 77%;
        margin: 0 auto 0;
    }

    .bottom-main-mid01 {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .bottom-main-mid02 {
        width: 50%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .kara-logo02 {
        width: 100%;
    }

    .kara-logo02 img {
        width: 25%;
        margin: -12% 5% 0 auto;
    }

    /*.bottom-main-bottom-con {
        width: 100%;
    }*/

    #Voice {
        width: 100%;
    }

    .voice-block01 {
        width: 90%;
        margin: 0 auto 0;
        padding: 5% 4% 5%;
        background-color: #ffffff;
        border-radius: 24px;
        text-align: center;
    }

    .img07-01 {
        width: 45%;
        max-width: 200px;
        margin: 0 auto 0;
    }

    .voice-b01-copy01 {
        padding: 0.75em 2em;
        /*350-767,18-26*/
        font-size: clamp(1.125rem, 0.705rem + 1.92vw, 1.625rem);
        font-weight: 700;
        line-height: 1.5em;
        text-align: center;
        color: #e40012;
        background-image: url("../images/fukidashi02.png");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        display: inline-block;
    }

    .voice-b01-copy02 {
        /*350-767,15-22*/
        font-size: clamp(0.938rem, 0.57rem + 1.68vw, 1.375rem);
        font-weight: 500;
        text-align: left;
        display: inline-block;
    }

}



@media screen and (min-width: 641px) {

    .tab_none {
        display: none;
    }

}


@media print,
screen and (min-width: 768px) {

    .pc_none {
        display: none;
    }

    .max-area {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%);
    }

    .menu-bar-area,
    .navi-area-sp {
        display: none;
    }

    .navi-area {
        width: 100%;
        margin: 0 auto 0;
        padding: calc(100vw * (10 / 1200px)) calc(100vw * (20 / 1200px)) calc(100vw * (10 / 1200px));
        background-color: rgba(255, 255, 255, 1);
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;
        transition: .5s;
    }

    @media screen and (min-width: 1200px) {

        .navi-area {
            padding: 10px 20px 10px;
        }
    }

    .navi-area.navi-hide {
        transform: translateY(-100%);
    }

    #navi {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto 0;
        position: relative;
        display: flex;
        align-items: center;
    }

    .navi-inner {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 0.5em 0 0.5em;
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .navi-menu {
        padding: 0 0.5em 0;
        text-align: center;
        /*768-1200,16-20*/
        font-size: clamp(1rem, 0.556rem + 0.93vw, 1.25rem);
        font-weight: 600;
        line-height: 1.5em;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 2px solid #000000;
        position: relative;
        transition: .4s;
    }

    #navi01.navi-menu {
        width: calc(100% * (7.5 / 21.5));
    }

    #navi02.navi-menu {
        width: calc(100% * (4 / 21.5));
    }

    #navi03.navi-menu {
        width: calc(100% * (5 / 21.5));
    }

    #navi04.navi-menu {
        width: calc(100% * (5 / 21.5));
        border-right: none;
    }

    .navi-menu a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .navi-menu:hover {
        cursor: pointer;
        color: #e40012;
    }

    .contents-area {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 0 calc(100 * (100vw / 1200));
    }

    @media screen and (min-width: 1200px) {

        .contents-area {
            padding: 0 0 100px;
        }
    }

    .main-area {
        width: 100%;
        margin: 0 auto;
        /*background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);*/
        display: flex;
        flex-direction: column;
    }

    .main-top-con {
        width: 100%;
        margin: 0 auto;
        display: flex;
    }

    .main-top01 {
        width: 30%;
        padding: 5% 0 0;
        /*background-color: rgba(0, 0, 0, 1);*/
    }

    .main-top01 img {
        width: 70%;
        margin: 0 auto 0;
    }

    .main-top02 {
        width: 40%;
        padding: 2.5% 0 0;
        /*background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%);*/
    }

    .main-top02 img {
        width: 100%;
        margin: 0 auto 0;
    }

    .main-top03 {
        width: 30%;
        padding: 5% 0 0;
        /*background-color: rgba(255, 0, 0, 1);*/
    }

    .main-top03 img {
        width: 77%;
        margin: 0 auto 0;
    }

    .main-mid-con {
        width: 100%;
        display: flex;
    }

    .main-mid01 {
        width: 50%;
        background: linear-gradient(30deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .main-mid02 {
        width: 50%;
        background: linear-gradient(330deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(255, 0, 0, 1) 30%, rgba(255, 0, 0, 1) 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .main-mid-copy01 {
        max-width: 80%;
        padding: 0 0.5em;
        text-align: center;
        /*768-1200,14-20*/
        font-size: clamp(0.875rem, 0.208rem + 1.39vw, 1.25rem);
        font-weight: 800;
        color: #ff0000;
        background-color: #ffff00;
        display: flex;
        flex-grow: 1;
        align-items: center;
    }

    .main-mid-copy01.dummy {
        background-color: #000000;
    }

    .main-mid-copy02 {
        max-width: 80%;
        text-align: center;
        /*768-1200,22-32*/
        font-size: clamp(1.375rem, 0.264rem + 2.31vw, 2rem);
        font-weight: 600;
        color: #ffffff;
    }

    .package2025-01,
    .package2025-02 {
        width: 65%;
        margin: 1% auto 0;
        padding-bottom: 5%;
    }

    /*.main-bottom-con {
        width: 100%;
        background-color: #ffffff;
    }

    .kara-logo {
        width: 10%;
        margin: -7% 2% 0 auto;
    }*/

    .kara-logo {
        width: 100%;
        /*margin: -15% 2% 0 auto;*/
        background-color: rgba(255, 255, 255, 1);
    }

    .kara-logo img {
        width: 20%;
        margin: -12.5% 2.5% 0 auto;
    }

    #About {
        width: 100%;
        background-color: #ffffff;
    }

    .about-block01 {
        width: 100%;
        margin: 0 auto;
        padding: calc(10 * (100vw / 1200)) 5% calc(50 * (100vw / 1200));
        text-align: center;
    }

    @media screen and (min-width: 1200px) {

        .about-block01 {
            padding: 10px 5% 50px;
        }
    }

    .about-b01-copy01 {
        margin-bottom: 1em;
        /*768-1200,36-52*/
        font-size: clamp(2.25rem, 0.472rem + 3.7vw, 3.25rem);
        font-weight: 700;
    }

    .about-b01-copy02 {
        /*768-1200,18-26*/
        font-size: clamp(1.125rem, 0.236rem + 1.85vw, 1.625rem);
        font-weight: 500;
        text-align: left;
        display: inline-block;
    }

    .marker01 {
        margin: 0 0.375em;
        padding: 0 0.25em;
        color: #ffffff;
        background-color: #000000;
    }

    .marker02 {
        margin: 0 0.5em;
        padding: 0 0.25em;
        color: #ffffff;
        background-color: #e40012;
    }

    .about-block02,
    .about-block04 {
        width: 100%;
        margin: 0 auto;
        padding: calc(50 * (100vw / 1200)) 5% calc(50 * (100vw / 1200));
        text-align: center;
        background-color: #000000;
    }

    @media screen and (min-width: 1200px) {

        .about-block02,
        .about-block04 {
            padding: 50px 5% 50px;
        }
    }

    .about-b02-copy01,
    .about-b04-copy01 {
        /*768-1200,20-28*/
        font-size: clamp(1.25rem, 0.361rem + 1.85vw, 1.75rem);
        font-weight: 700;
        color: #ffffff;
    }

    .about-block03 {
        width: 100%;
        margin: 0 auto;
        padding: 0 0 calc(50 * (100vw / 1200));
        text-align: center;
    }

    @media screen and (min-width: 1200px) {

        .about-block03 {
            padding: 0 0 50px;
        }
    }

    .about-b03-top {
        padding: 0;
        background: #ffedd0;
        position: relative;
    }

    .about-b03-top::before {
        content: "";
        position: absolute;
        height: 10%;
        width: 100%;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        background-color: #ffedd0;
        left: 0;
        bottom: -10%;
    }

    .img03-01 {
        width: 80%;
        margin: 0 auto 0;
        padding: 5% 0 0;
    }

    .about-b03-bottom {
        padding: 10% 5% 0;
    }

    .about-b03-copy01 {
        /*768-1200,15-23*/
        font-size: clamp(0.938rem, 0.049rem + 1.85vw, 1.438rem);
        font-weight: 700;
    }

    .about-b03-copy01 span {
        font-size: 0.75em;
        vertical-align: top;
    }

    .about-b03-copy02 {
        /*768-1200,20-28*/
        font-size: clamp(1.25rem, 0.361rem + 1.85vw, 1.75rem);
        font-weight: 700;
        color: #e40012;
    }

    .about-b03-copy03 {
        width: 90%;
        max-width: 860px;
        margin: 2em 0 0;
        padding-left: 1em;
        text-indent: -1em;
        /*768-1200,14-16*/
        font-size: clamp(0.875rem, 0.653rem + 0.46vw, 1rem);
        text-align: left;
        display: inline-block;
    }

    .about-block05 {
        width: 100%;
        margin: 0 auto;
        padding: calc(50 * (100vw / 1200)) 0 calc(50 * (100vw / 1200));
    }

    @media screen and (min-width: 1200px) {

        .about-block05 {
            padding: 50px 0 50px;
        }
    }

    .about-b05-top {
        width: 90%;
        max-width: 1080px;
        margin: 0 auto calc(50 * (100vw / 1200));
        display: flex;
    }

    @media screen and (min-width: 1200px) {

        .about-b05-top {
            margin: 0 auto 50px;
        }
    }

    .img03-02 {
        width: 50%;
        padding-right: 5%;
    }

    .img03-03 {
        width: 50%;
        padding-left: 5%;
    }

    .about-b05-bottom {
        width: 80%;
        max-width: 960px;
        margin: 0 auto 0;
        display: flex;
        flex-wrap: wrap;
    }

    .about-b05b-line01 {
        width: 100%;
        display: flex;
    }

    .about-b05b-line01-left,
    .about-b05b-line02-left {
        width: 60%;
        padding-right: 2%;
    }

    .about-b05b-line01-right,
    .about-b05b-line02-right {
        width: 40%;
    }

    .about-b05b-copy01 {
        margin: 0 0 0.5em;
        padding: 0em 1.5em;
        /*768-1200,18-26*/
        font-size: clamp(1.125rem, 0.236rem + 1.85vw, 1.625rem);
        font-weight: 800;
        text-align: center;
        color: #ffffff;
        background-color: #e40012;
        display: inline-block;
    }

    .about-b05b-copy02 {
        /*768-1200,16-22*/
        font-size: clamp(1rem, 0.333rem + 1.39vw, 1.375rem);
    }

    .about-b05b-line02 {
        width: 100%;
        margin: 2em 0 0;
        display: flex;
    }

    .about-block06 {
        width: 100%;
        margin: 0 auto;
        padding: calc(50 * (100vw / 1200)) 0 calc(50 * (100vw / 1200));
        background-color: #ffedd0;
    }

    @media screen and (min-width: 1200px) {

        .about-block06 {
            padding: 50px 0 50px;
        }
    }

    .about-b06 {
        width: 80%;
        max-width: 960px;
        margin: 0 auto 0;
    }

    .about-b06-title {
        width: 100%;
        padding: 0em 1.5em;
        /*768-1200,24-32*/
        font-size: clamp(1.5rem, 0.611rem + 1.85vw, 2rem);
        font-weight: 600;
        text-align: center;
        color: #ffffff;
        background-color: #727171;
    }

    .img03-06 {
        width: 85%;
        margin: 5% auto 2.5%;
    }

    .about-b06-copy01 {
        width: 90%;
        margin: 0 auto 0;
        padding-left: 1em;
        text-indent: -1em;
        /*768-1200,15-20*/
        font-size: clamp(0.938rem, 0.382rem + 1.16vw, 1.25rem);
    }

    #Product01 {
        width: 100%;
        background-color: #000000;
        padding: 0 0 calc(100 * (100vw / 1200));
    }

    #Product02 {
        width: 100%;
        background-color: #ff0000;
        padding: 0 0 calc(100 * (100vw / 1200));
    }

    @media screen and (min-width: 1200px) {

        #Product01 {
            padding: 0 0 100px;
        }

        #Product02 {
            padding: 0 0 100px;
        }
    }

    .product01-block01,
    .product02-block01 {
        width: 100%;
        position: relative;
    }

    .p01-b01-steam,
    .p02-b01-steam {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    /* 湯気 */
    @keyframes steam01 {
        0% {
            bottom: 5%;
            filter: blur(16px);
            transform: rotateY(0deg);
            transform: scale(0.6, 1);
            opacity: 0
        }

        11% {
            opacity: 0.1
        }

        33% {
            transform: rotateY(40deg);
            transform: scale(1, 1.2);
            opacity: 0.6
        }

        66% {
            transform: rotateY(20deg);
            transform: scaleY(1.8, 1);
            opacity: 0.4
        }

        100% {
            /*bottom: 0;*/
            bottom: 100%;
            filter: blur(20px);
            transform: rotateY(60deg);
            transform: scaleY(2, 1.8);
            opacity: 0
        }
    }

    @keyframes steam02 {
        0% {
            bottom: -10%;
            filter: blur(16px);
            transform: rotateY(0deg);
            transform: scale(0.6, 0.6);
            opacity: 0
        }

        11% {
            opacity: 0.1
        }

        33% {
            transform: rotateY(40deg);
            transform: scale(0.8, 1);
            opacity: 0.5
        }

        66% {
            transform: rotateY(2deg);
            transform: scaleY(1, 1.2)
        }

        100% {
            bottom: 100%;
            filter: blur(20px);
            transform: rotateY(50deg);
            transform: scaleY(1.2, 1.4);
            opacity: 0
        }
    }

    .steam01 {
        position: absolute;
        right: 0;
        animation: steam01 10s infinite linear;
        opacity: 0
    }

    .steam02 {
        position: absolute;
        left: 7.5%;
        animation: steam02 14s infinite linear;
        opacity: 0
    }

    .steam03 {
        margin: auto;
        position: absolute;
        right: 0;
        left: 0;
        animation: steam02 12s infinite linear;
        animation-delay: 6s;
        opacity: 0
    }

    .steam01 img,
    .steam03 img {
        width: 400px;
        height: 640px
    }

    .steam02 img {
        width: 320px;
        height: 480px
    }

    @media screen and (min-width: 961px) {

        .steam01 img,
        .steam03 img {
            width: 500px;
            height: 800px
        }

        .steam02 img {
            width: 400px;
            height: 600px
        }
    }

    .logo2025-01 {
        width: 60%;
        margin: 5% auto 7.5%;
    }

    .logo2025-02 {
        width: 62.8%;
        margin: -12.5% auto 7.5%;
        position: relative;
    }

    .product01-block02,
    .product02-block02 {
        width: 90%;
        margin: 0 auto 0;
        padding: 0 2.5%;
        display: flex;
    }

    /*.p01-b02-top,
    .p02-b02-top {
        display: none;
    }*/

    .p01-b02-left,
    .p02-b02-left {
        width: 50%;
        padding: 0 2.5%;
    }

    .p01-b02-right {
        width: 50%;
        padding: 7.5% 0 0 2.5%;
    }

    .p02-b02-right {
        width: 50%;
        padding: 0 0 0 2.5%;
    }

    .p01-b02-copy01,
    .p02-b02-copy01 {
        width: 100%;
        /*768-1200,42-68*/
        font-size: clamp(2.625rem, -0.264rem + 6.02vw, 4.25rem);
        font-weight: 700;
        line-height: 1.5em;
        text-align: center;
        color: #ffffff;
    }

    .p02-b02-copy02 {
        width: 100%;
        margin: 0 auto 0.25em;
        /*768-1200,28-42*/
        font-size: clamp(1.75rem, 0.194rem + 3.24vw, 2.625rem);
        font-weight: 700;
        line-height: 1.375em;
        text-align: center;
        color: #ffef00;
        background-image: url("../images/fukidashi01.png");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom;
    }

    .p01-niku {
        width: 70%;
        margin: 5% auto 0;
    }

    .p02-niku {
        width: 80%;
        margin: 5% auto 0;
    }

    .product01-block03,
    .product02-block03 {
        width: 90%;
        margin: -10% auto 0;
        padding: 1%;
        background-color: #ffffff;
        border-radius: 16px;
    }

    .p01-b03-inner {
        width: 100%;
        padding: 2.5% 7.5% 5%;
        border: 5px solid #000000;
    }

    .p02-b03-inner {
        width: 100%;
        padding: 2.5% 7.5% 5%;
        border: 5px solid #ff0000;
    }

    .p01-b03-line01,
    .p02-b03-line01 {
        width: 100%;
        margin: 0 auto 5%;
        display: flex;
    }

    .p01-b03-line01:first-child {
        margin: 12.5% auto 5%;
    }

    .p01-b03-line01:last-child {
        margin: 0 auto 0;
    }

    .p02-b03-line01:first-child {
        margin: 12.5% auto 5%;
    }

    .p02-b03-line01:last-child {
        margin: 0 auto 0;
    }

    .p01-b03-icon {
        width: 10%;
        margin-right: 2.5%;
        padding-top: 0.375em;
    }

    .p01-b03-icon img {
        width: 100%;
        margin: 0 auto 0;
    }

    .p02-b03-icon {
        width: 10%;
        margin-right: 2.5%;
        margin-top: -1em;
    }

    .p02-b03-icon img {
        width: 80%;
        margin: 0 auto 0;
    }

    .p01-b03-copy01,
    .p02-b03-copy01 {
        width: 90%;
        /*768-1200,20-28*/
        font-size: clamp(1.25rem, 0.361rem + 1.85vw, 1.75rem);
        line-height: 1.5em;
    }

    .p01-b03-copy01 span {
        font-size: 0.625em;
        vertical-align: top;
    }

    .p02-b03-copy01 span.level3::after {
        content: '';
        display: inline-block;
        width: 3em;
        height: 1.25em;
        background-image: url("../images/level3.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .p01-b03-copy02 {
        width: 90%;
        padding-left: 1em;
        text-indent: -1em;
        /*768-1200,15-20*/
        font-size: clamp(0.938rem, 0.382rem + 1.16vw, 1.25rem);
    }

    .product02-block04 {
        text-align: center;
        padding: calc(100 * (100vw / 1200)) 0 0;
    }

    @media screen and (min-width: 1200px) {

        .product02-block04 {
            padding: 100px 0 0;
        }
    }

    .p02-b04-copy01 {
        /*768-1200,27-39*/
        font-size: clamp(1.688rem, 0.354rem + 2.78vw, 2.438rem);
        font-weight: 700;
        color: #ffffff;
    }

    .p02-b04-copy02 {
        margin: -0.25em 0 0;
        /*768-1200,36-52*/
        font-size: clamp(2.25rem, 0.472rem + 3.7vw, 3.25rem);
        font-weight: 700;
        color: #ffef00;
    }

    .p02-b04-copy03 {
        /*768-1200,27-39*/
        font-size: clamp(1.688rem, 0.354rem + 2.78vw, 2.438rem);
        font-weight: 700;
        line-height: 1.5em;
        color: #ffffff;
    }

    .img05-03 {
        margin: calc(50 * (100vw / 1200)) 0 calc(60 * (100vw / 1200));
        padding-left: 5%;
    }

    .img05-04 {
        width: 65%;
        margin: calc(30 * (100vw / 1200)) auto 0;
    }

    @media screen and (min-width: 1200px) {

        .img05-03 {
            margin: 50px 0 60px;
        }

        .img05-04 {
            margin: 30px auto 0;
        }
    }

    #Initiative {
        width: 100%;
        padding: calc(75 * (100vw / 1200)) 0 calc(100 * (100vw / 1200));
        background-color: #ffffff;
    }

    @media screen and (min-width: 1200px) {

        #Initiative {
            padding: 75px 0 100px;
            background-color: #ffffff;
        }
    }

    .initiative-block01 {
        width: 90%;
        margin: 0 auto 0;
    }

    .ini-b01-copy01 {
        /*768-1200,36-52*/
        font-size: clamp(2.25rem, 0.472rem + 3.7vw, 3.25rem);
        font-weight: 700;
        line-height: 1.675em;
        text-align: center;
    }

    .initiative-block02 {
        width: 85%;
        margin: calc(50 * (100vw / 1200)) auto calc(50 * (100vw / 1200));
        border: 10px solid;
        border-image: conic-gradient(#dbb133, #ffe691, #ffe380, #ffe691, #ffe380, #dbb133, #fccf00, #fccf00, #dbb133) 1;
        border-radius: 16px;
    }

    @media screen and (min-width: 1200px) {

        .initiative-block02 {
            margin: 50px auto 50px;
        }
    }

    .ini-b02-copy01 {
        width: 100%;
        margin: 0 auto 0;
        padding: 1em 2em;
        /*768-1200,20-28*/
        font-size: clamp(1.25rem, 0.361rem + 1.85vw, 1.75rem);
        font-weight: 700;
        color: #ffffff;
        background-color: #e40012;
        border-bottom: 10px solid;
        border-image: linear-gradient(to right, #fccf00, #ffe691) 1;
    }

    .img06-01 {
        width: 90%;
        margin: 0 auto 0;
        padding: 5% 0;
    }

    .initiative-block03 {
        width: 80%;
        margin: 0 auto 0;
    }

    .ini-b03-copy01 {
        /*768-1200,22-32*/
        font-size: clamp(1.375rem, 0.264rem + 2.31vw, 2rem);
        font-weight: 700;
    }

    .bottom-main-area {
        width: 100%;
        margin: calc(50 * (100vw / 1200)) auto calc(50 * (100vw / 1200));
        ;
        display: flex;
        flex-direction: column;
    }

    @media screen and (min-width: 1200px) {

        .bottom-main-area {
            margin: 50px auto 50px;
        }
    }

    .bottom-main-top01 {
        width: 30%;
        padding: 5% 0 0;
    }

    .bottom-main-top01 img {
        width: 70%;
        margin: 0 auto 0;
    }

    .bottom-main-top02 {
        width: 40%;
        padding: 2.5% 0 0;
    }

    .bottom-main-top02 img {
        width: 100%;
        margin: 0 auto 0;
    }

    .bottom-main-top03 {
        width: 30%;
        padding: 5% 0 0;
    }

    .bottom-main-top03 img {
        width: 77%;
        margin: 0 auto 0;
    }

    .bottom-main-mid01 {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .bottom-main-mid02 {
        width: 50%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .kara-logo02 {
        width: 100%;
    }

    .kara-logo02 img {
        width: 20%;
        margin: -12.5% 2.5% 0 auto;
    }

    /*.bottom-main-bottom-con {
        width: 100%;
    }*/

    #Voice {
        width: 100%;
    }

    .voice-block01 {
        width: 80%;
        margin: 0 auto 0;
        padding: 2.5% 5% 5%;
        background-color: #ffffff;
        border-radius: 24px;
        text-align: center;
    }

    .img07-01 {
        width: 40%;
        max-width: 200px;
        margin: 0 auto 0;
    }

    .voice-b01-copy01 {
        padding: 0.75em 2em;
        /*768-1200,24-32*/
        font-size: clamp(1.5rem, 0.611rem + 1.85vw, 2rem);
        font-weight: 700;
        text-align: center;
        color: #e40012;
        background-image: url("../images/fukidashi02.png");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        display: inline-block;
    }

    .voice-b01-copy02 {
        /*768-1200,15-23*/
        font-size: clamp(0.938rem, 0.049rem + 1.85vw, 1.438rem);
        font-weight: 500;
        text-align: left;
        display: inline-block;
    }

}