html.scroll-enabled::-webkit-scrollbar {
    display: none; /* Chrome, Safari, 新しいEdge */
}

html.scroll-enabled {
    -ms-overflow-style: none;  /* IE, 古いEdge */
    scrollbar-width: none;     /* Firefox */
}
:root {
    /* カラー変数の定義 */
    --theme-color: #0060bc;
    --orange: #f7931e;
    --purple: #93278f;
    --blue:#004abc;
    --gray: #96083e;
    --red: #ed6d5b;
    --green: #00a99d;
    --yellow: #a67c52;
    --lirht-green: #599245;
    --light-red: #ed51b3;
    --light-red2: #a02f33;
    --light-blue: #29abe2;
    --border-yellow: #ffff00;
}
.border-line{
    background-color: var(--border-yellow);
}
.orange, .kakko.orange svg {
    color:var(--orange);
}
.purple, .kakko.purple svg {
    color:var(--purple);
}
.blue, .kakko.blue svg {
    color:var(--blue);
}
.gray, .kakko.gray svg {
    color:var(--gray);
}
.red, .kakko.red svg {
    color:var(--red);
}
.green, .kakko.green svg {
    color:var(--green);
}
.yellow, .kakko.yellow svg {
    color:var(--yellow);
}
.light-green, .kakko.light-green svg {
    color:var(--lirht-green);
}
.light-red, .kakko.light-red svg {
    color:var(--light-red);
}
.light-red2, .kakko.light-red2 svg {
    color:var(--light-red2);
}
.light-blue, .kakko.light-blue svg {
    color:var(--light-blue);
}


.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}
.inversion{
        rotate:180deg;
    }

body {
    margin: 0; padding: 0;
    min-height: 120vh;
    height: fit-content;
    background: #004abc;
    overflow-x: hidden;
    font-family: 'Noto Sans JP', sans-serif;
}


@media screen and (min-width: 801px) {
    #space-container {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        overflow: hidden;
        background-image: url("../images/top-bg.jpg");
        background-position:center;
        background-size:cover;
        z-index: 1;
    }
    #space-container.color::before {
        content: "";
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-position: center;
        background-size: cover;
        transition: all 300ms ease;
        background-image: url("../images/bg-color1.png");
        opacity: 0;
        animation: bgFadeLoop 10s infinite ease;
    }
    
    /* bg animation */
    @keyframes bgFadeLoop {
        0% {
            background-image: url("../images/bg-color1.png");
            opacity: 1;
        }
        10% {
            background-image: url("../images/bg-color2.png");
        }
        20% {
            background-image: url("../images/bg-color3.png");
        }
        30% {
            background-image: url("../images/bg-color4.png");
        }
        40% {
            background-image: url("../images/bg-color5.png");
        }
        50% {
            background-image: url("../images/bg-color6.png");
        }
        60% {
            background-image: url("../images/bg-color7.png");
        }
        70% {
            background-image: url("../images/bg-color8.png");
        }
        80% {
            background-image: url("../images/bg-color9.png");
        }
        90% {
            background-image: url("../images/bg-color10.png");
        }
        100% {
            background-image: url("../images/bg-color1.png");
            opacity: 1;
        }
    }

    #space-container h1{
        position:absolute;
        width:100vw;
        bottom:-25px;
        display:block;
        height:fit-content;
    }
    
    #space-container h1 span{
        position:relative;
        margin:auto;
        display:block;
        width:clamp(335px, 41vw, 798px);
        height:fit-content;
        text-align:center;
    }
    #space-container h1 .txt{
        bottom:0px;
        width:100%;
        height:auto;
    }
    #space-container h1 .img{
        display:block;
        position:relative;
        z-index:5;
        width:clamp(234px, 28.5vw, 551px);
        margin:0px auto;
    }
    .h1-2{
        width:fit-content!important;
        left:37%;
    }
    #space-container h1.h1-2 span{
        width:fit-content;
    }
    .content-box{
        height:clamp(165px, 20vw, 390px);
    }

    .logo-bounce {
        display: inline-flex;
        align-items: flex-end;
        justify-content: center;
        gap: 15px;
        opacity: 0;
        transform: translateY(100px) scale(0.7);
        animation: openingBounce 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
    }

    .logo-bounce .img {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
        animation: characterBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.5) 0.8s forwards;
    }

    /* ロゴが下から湧き上がってバウンドする動き */
    @keyframes openingBounce {
        0% {
            opacity: 0;
            transform: translateY(100px) scale(0.7);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* 画像を後から表示　*/
    @keyframes characterBounce {
        0% {
            opacity: 0;
            transform: scale(0.5) rotate(-10deg);
        }
        100% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }

    #space {
        width: 100%; height: 100%;
        position: relative;
        will-change: transform;
    }

    #source { display: none; }


    .food-icon {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(0);
        cursor: pointer;
        user-select: none;
        z-index: 2;
        width: 80px;
        height: 80px;
        will-change: transform, opacity;
        transition: filter 0.3s ease, scale 0.3s ease;
    }

    .food-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Hover*/
    .food-icon:hover {
        filter: drop-shadow(0 0 15px white) drop-shadow(0 0 30px rgba(255,255,255,0.5));
        scale: 1;
        z-index: 100;
    }

    #progress-container {
        position: fixed; bottom: 0; left: 0;
        width: 100%; height: 4px;
        background: rgba(255,255,255,0.1); z-index: 2000;
    }
    #progress-bar {
        height: 100%; width: 0%;
        background: linear-gradient(to right, #00f2fe, #4facfe);
        transition: width 0.05s linear;
    }

    .modal-overlay .title-container .text{
        position:relative;
        width:100%;
        padding-left:60px;
        z-index:1;
    }
    .modal-overlay {
        position: fixed; top: 0; left: 0;
        background: #0051bedd;
        display: block; 
        overflow-y: auto;
        z-index: 3000; opacity: 0; visibility: hidden;
        transition: all 0.5s ease;
        padding: clamp(42px, 5.1vw, 100px) 0px;
        padding-top:clamp(30px, 3.6vw, 70px);
        box-sizing: border-box;
        width: 100vw; height: 100vh; 
    }
    .modal-header{
        position:relative;
        width: clamp(800px, 90vw, 1000px);
        max-width: 90%;
        margin:0px auto clamp(8.5px, 1vw, 20px) auto;
    }
    .modal-header .modal-logo{
        width:387px;
        display:block;
        margin:0px auto;
    }
    .modal-header .modal-close{
        width:58px;
        position:absolute;
        right:0px;
        top:0px;
    }
    .modal-header .modal-close:hover{
        cursor:pointer;
    }
    .modal-overlay.is-active { opacity: 1; visibility: visible; }
    .modal-content {
        background: #fff;
        margin: 0px auto;
        border-radius: 10px; text-align: center;
        width: clamp(800px, 90vw, 1000px);
        max-width: 90%;
        transform: translateY(50px); 
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .modal-overlay.is-active .modal-content { 
        transform: translateY(0); 
    }
    .modal-name { font-size: 4rem; margin: 0; font-weight: bold; color: #333; }

    /* modal style */

    .flex-container {
        display: flex;
        justify-content: center;
    }
    .item-1 { order: 1; } 
    .item-2 { order: 2; } 
    .item-3 { order: 3; } 

    .title-container{
        width:100%;
        padding-top:20px;
    }
    .title-container span{
        display:block;
        width:fit-content;
        height:fit-content;
        position:relative;
    }
    .title-img{
        display:block;
        position:absolute;
        right:0px;
        height:254px;
        width:auto;
        z-index:0;
        object-fit: contain;
    }
    .title-container .text{
        display: block;
        text-align:left;
        width:fit-content;
        margin:0px auto;
        min-height: 200px;
    }
    .title-container .title {
        font-size:clamp(18px, 1.5vw, 29px);
        display: block;
        padding-top:40px;
        color:#333333;
        font-weight:800;
    }
    .title-container .subtitle {
        font-size: 60px;
        display: block;
        font-weight:900;
    }
     
    .title-container .subtitle .b{
        position:relative;
        left:-0.5em;
    }

    .content-container{
        display:flex;
        justify-content:start;
        gap:0px 63px;
        font-size: 16px;
        line-height:35px;
        padding-top:30px;
    }
    .content-container p{
        width:clamp(400px,50vw, 600px);
        color:#1a1a1a;
        text-align:left;
        padding-bottom:50px;
        font-weight:bold;
        font-size:16px;
        line-height:35px;
    }
    .content-container img{
        display:block;
        position:relative;
        padding-top:1em;
        width:clamp(200px, 30vw, 276px);
    }
    .link-container{
        display:flex;
        justify-content:center;
        gap:0px 40px;
        padding:25px 0px;
        border-top:1px solid #e6e6e6;
    }
    .link-container a{
        text-decoration:none;
        color:white;
        font-size:18px;
        background-color:var(--theme-color);
        opacity:1;
        transition: opacity 0.3s ease;
        border-radius:50px;
        position:relative;
        display:block;
        padding:16px 0px;
        min-width: 327px;
    }
    .link-container a:hover{
        opacity:0.8;
    }
    .link-container a::after{
        content:"";
        display:block;
        position:absolute;
        background-image: url("../images/link-next.svg");
        background-size: contain;
        background-repeat: no-repeat;
        width: 9px; height: 17px;
        right:17px;
        top:44%;

    }

    /* center */
    #center-screen{
        display: none;
        position: absolute;
        top: 0; left: 0;
        width: 100%; 
        min-height: 100vh; 
        background: #fff; 
        z-index: 4000; 
        justify-content: center; 
        align-items: flex-start; 
        opacity: 0; 
        transition: opacity 1s ease;
    }
    .center-content1{
        display: block;
        position: relative;
        text-align: center;
        align-content: center;
        min-height: 100vh; 
        background-image: url("../images/content1-bg.jpg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        animation: floatBackground 8s infinite ease-in-out;
    }
    @keyframes floatBackground {
        0%, 100% {
            background-position: center center;
        }
        25% {
            background-position: calc(50% + 10px) calc(50% - 15px);
        }
        50% {
            background-position: calc(50% - 15px) calc(50% + 10px);
        }
        75% {
            background-position: calc(50% - 8px) calc(50% - 12px);
        }
    }

    .center-content1 h2{
        width:fit-content; 
        margin:auto auto; 
        font-size: clamp(16px, 1.2vw, 22px); 
        height: fit-content;
        line-height: 55px;
        color:#1a1a1a;
        padding:200px 10px;
    }
    .center-content2{
        background: #004abc;
        padding-top:170px;
    }

    .center-content2 h3{
        font-size: 50px;
        color: white;
        background-image: url("../images/content2-top-bg.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        width:fit-content;
        margin: 0px auto 40px auto;
        padding: 40px 0px;
    }
    .center-content2 h3 img{
        display:block;
        width:645px;
    }

    #lists-content{
        padding-top:110px;
        padding-left:100px;
    }
    #lists-content ul{
        list-style: none;
        margin: 0 auto;
        padding: 0;
        width: clamp(553px, 70vw, 1300px);
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(106px, 13vw, 250px) 10px;
    }
    #lists-content ul li{
        border-radius: 16px;
        max-height: clamp(107px,13vw,252px);
        width:clamp(220px,22vw,425px);
        padding: 25px clamp(8.5px, 1vw, 20px);
        padding-top:73px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        transition: transform 300ms ease;
    }
    #lists-content ul li:hover{transform: translateY(-8px);}
    #lists-content .content-container,
    #lists-content .link-container,
    #lists-content .title-img{
        display:none;
    }

    .modal-overlay .content-br{
        display:none;
    }
    #lists-content .content-br{
        display:block;
    }
    #lists-content .title, #lists-content .subtitle{
        opacity: 0px;
    
    }

    #lists-content ul li:nth-child(1) {
        top:clamp(25px, 3vw, 60px);

    }
    #lists-content ul li:nth-child(2) {
        top:clamp(85px,10.4vw,200px);

    }
    #lists-content ul li:nth-child(3) {
        top:clamp(-20px,-1vw,-8.5px);
    }
    #lists-content ul li:nth-child(4) {
        top:clamp(21.3px,2.6vw,50px);
        left: clamp(8px,8.3vw,160px);
    }
    #lists-content ul li:nth-child(5) {
    	margin: clamp(25px, 3vw, 60px) 0px; 
        margin-left: clamp(60px,7.3vw,140px);
        left:clamp(60px,7.3vw, 140px);
    }
    #lists-content ul li:nth-child(6) {
        left:clamp(30px, 3.6vw, 70px);

    }
    #lists-content ul li:nth-child(7) {
        top:clamp(-100px,-5.2vw,42.5px);
        left:clamp(38px,4.6vw, 90px);
    }
    #lists-content ul li:nth-child(8) {
        top: clamp(106px,13vw, 250px);
        left:clamp(-60px,-3vw, -25.5px);
    }
    #lists-content ul li:nth-child(9) {
        margin-left: clamp(68px,8.3vw,160px);
        top:clamp(-20px,-1vw, -9px);
    }
    #lists-content ul li:nth-child(10) {
        top: clamp(64px,7.8vw, 150px);
        left:clamp(34px,4.1vw, 80px);
    }


    .title-container .kakko svg{
        display:none;
    }
    #lists-content .kakko{
        display: none;
        
    }
    #lists-content .kakko svg {
        display: none;
    }
    #lists-content .kakko svg path {
        display:none;
    }
    #lists-content .title{
        display: none;
    }
    #lists-content .subtitle{
        display: none;
    }

    #lists-content .lists-img{
        display:block;
        position:absolute;
        top:-210px;
        width:clamp(185px,22.5vw,435px);
    }
    .page-logo img{
        width:218px;
        height:auto;
        display:block;
        margin: auto auto;
    }
    .page-logo{
        width:360px;
        height:101px;
        position:fixed;
        left:0px;
        background-color: #fff;
        align-items: center;
        align-content: center;
        z-index: 999;
    }

    .to-top-btn .modal-logo {
        width: clamp(85px,10.4vw,200px);
        height: auto;
        display: block;
    }

    .footer{
        text-align: center;
        padding-top:clamp(85px,10.4vw,200px);
        padding-bottom :clamp(25.5px,3.1vw,60px);
    }
    .footer small{
        color:#ffffff;
        font-size:15px;
        letter-spacing:1px;
        font-weight: 100;
    }
    .to-top-btn{
        display:block;
        position:fixed;
        width:100%;
        bottom:20px;
        margin:0px auto;
    }
    .to-top-btn span{
        display:block;
        width:clamp(616px, 75vw, 1450px);
        margin:0px auto;
    }
    .to-top-btn a{
        display:block;
        width:fit-content;
        margin-left:auto;
    }
    #smooth-to-top img, #smooth-to-center img{
        cursor: pointer;
        padding: 0;
        outline: none;
        display:block;
        width:clamp(43px, 5.2vw, 101px);
        height:auto;
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    
    #smooth-to-top img:hover, #smooth-to-center img:hover{
        transform: translateY(-5px);
        filter: brightness(1.1);
    }

    .sp{
        display:none!important;
    }
    .title-container .sp-size{
        display:inline-block!important;
    }
}


@media screen and (max-width: 800px) {
    #space-container {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        overflow: hidden;
        background-image: url("../images/sp/top-bg-sp.jpg");
        background-position:center;
        background-size:cover;
        z-index: 1;
    }
    #space-container.color::before {
        content: "";
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-position: center;
        background-size: cover;
        transition: all 300ms ease;
        background-image: url("../images/sp/bg-color1.png");
        opacity: 0;
        animation: bgFadeLoop 15s infinite ease-in-out;
    }

    
    /* bg animation */
    @keyframes bgFadeLoop {
        0% {
            background-image: url("../images/sp/bg-color1.png");
            opacity: 1;
        }
        10% {
            background-image: url("../images/sp/bg-color2.png");
        }
        20% {
            background-image: url("../images/sp/bg-color3.png");
        }
        30% {
            background-image: url("../images/sp/bg-color4.png");
        }
        40% {
            background-image: url("../images/sp/bg-color5.png");
        }
        50% {
            background-image: url("../images/sp/bg-color6.png");
        }
        60% {
            background-image: url("../images/sp/bg-color7.png");
        }
        70% {
            background-image: url("../images/sp/bg-color8.png");
        }
        80% {
            background-image: url("../images/sp/bg-color9.png");
        }
        90% {
            background-image: url("../images/sp/bg-color10.png");
        }
        100% {
            background-image: url("../images/sp/bg-color1.png");
            opacity: 1;
        }
    }

    #space-container h1{
        position:absolute;
        width:100vw;
        bottom:-25px;
        display:block;
        height:fit-content;
        z-index:0;
    }
    #space-container h1 span{
        position:relative;
        margin:auto;
        display:block;
        width:100%;
        height:fit-content;
        text-align:center;
    }
    #space-container h1 .txt{
        position:relative;
        width:clamp(309px, 85.6vw, 644px);
        height:auto;
        z-index:-1;
    }
    #space-container h1 .img{
        display:block;
        position:relative;
        z-index:5;
        width:clamp(264.5px, 73vw, 551px);
        margin:0px auto;
        padding-top:clamp(72px, 20vw, 150px);
        bottom:0px;
    }

    .logo-bounce {
        display: inline-flex;
        align-items: flex-end;
        justify-content: center;
        gap: 15px;
        opacity: 0;
        transform: translateY(100px) scale(0.7);
        animation: openingBounce 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
    }

    .logo-bounce .img {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
        animation: characterBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.5) 0.8s forwards;
    }

    /* ロゴが下から湧き上がってバウンドする動き */
    @keyframes openingBounce {
        0% {
            opacity: 0;
            transform: translateY(100px) scale(0.7);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* 画像を後から表示　*/
    @keyframes characterBounce {
        0% {
            opacity: 0;
            transform: scale(0.5) rotate(-10deg);
        }
        100% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }

    #space {
        width: 100%; height: 100%;
        position: relative;
        will-change: transform;
    }

    #source { display: none; }


    .food-icon {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(0);
        cursor: pointer;
        user-select: none;
        z-index: 2;
        width: clamp(38px, 15vw, 80px);
        height: clamp(38px, 15vw, 80px);
        will-change: transform, opacity;
        transition: filter 0.3s ease, scale 0.3s ease;
    }

    .food-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Hover*/
    .food-icon:hover {
        filter: drop-shadow(0 0 15px white) drop-shadow(0 0 30px rgba(255,255,255,0.5));
        scale: 1;
        z-index: 100;
    }

    #progress-container {
        position: fixed; bottom: 0; left: 0;
        width: 100%; height: 4px;
        background: rgba(255,255,255,0.1); z-index: 2000;
    }
    #progress-bar {
        height: 100%; width: 0%;
        background: linear-gradient(to right, #00f2fe, #4facfe);
        transition: width 0.05s linear;
    }

    .modal-overlay {
        position: fixed; top: 0; left: 0;
        background: #0051bedd;
        display: block; 
        overflow-y: auto;
        z-index: 3000; opacity: 0; visibility: hidden;
        transition: all 0.5s ease;
        padding-top: clamp(70px, 19.23vw, 145px);
        padding-inline: clamp(17px, 4.62vw, 35px);
        padding-bottom: clamp(36px, 10vw, 75px);
        box-sizing: border-box;
        width: 100vw; height: 100vh; 
    }
    .modal-header{
        position:relative;
        width: clamp(326px, 90.8vw, 680px);
        margin-inline: auto;
        margin-top: 0px;
        margin-bottom: clamp(10px, 2.56vw, 20px);
    }
    .modal-header .modal-logo{
        width: clamp(186px, 51.5vw, 387px);
        display:block;
        margin:0px auto;
    }
    .modal-header .modal-close{
        width: clamp(28px, 7.69vw, 58px);
        position:absolute;
        right:0px;
        top:0px;
    }
    .modal-header .modal-close:hover{
        cursor:pointer;
    }
    .modal-overlay.is-active { opacity: 1; visibility: visible; }
    .modal-content {
        background: #fff;
        margin: 0px auto;
        border-radius: 10px; text-align: center;
        width: clamp(326px, 90.8vw, 680px);
        transform: translateY(50px); 
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .modal-overlay.is-active .modal-content { 
        transform: translateY(0); 
    }
    .modal-name { font-size: 4rem; margin: 0; font-weight: bold; color: #333; }

    /* modal style */

    .flex-container {
        display: flex;
        justify-content: center;
    }
    .item-1-sp { order: 1; } 
    .item-2-sp { order: 2; } 
    .item-3-sp { order: 3; } 

    .title-container.flex-container{
        flex-wrap:wrap;
    }
    .title-container span{
        display:block;
        width:fit-content;
        height:fit-content;
        position:relative;
    }
    .title-img{
        display:block;
        width: clamp(135px, 37.44vw, 281px);
        padding-top: clamp(10px, 2.56vw, 20px);
        transform: scale(2);
        height:auto;
        margin:0px auto;
        object-fit: contain;
        position:absolute;
        top:0.8em;
        left:25%;
    }
    .title-container .text{
        display: block;
        text-align:left;
        width:fit-content;
        margin-right:auto;
    }
    .title-container .title {
        font-size: clamp(16px, 4.4vw, 33px);
        display: block;
        padding-top:  clamp(135px, 37.44vw, 281px);
        color:#333333;
    }
    .title-container .subtitle {
        font-size: clamp(28px, 7.7vw, 58px);
        display: block;
    }
    

    .content-container{
        display:flex;
        justify-content:start;
        flex-wrap:wrap;
        gap:0px clamp(30px, 8.46vw, 63px);
        font-size: 16px;
        line-height:35px;
        width: clamp(285px, 79.49vw, 595px);
        margin:0px auto;
    }
    .content-container p{
        width:100%;
        font-size: clamp(16px, 3.59vw, 28px);
        line-height:clamp(22px, 6.15vw, 46px);
        color:#1a1a1a;
        text-align:left;
    }
    .content-container img{
        display:block;
        position:relative;
        padding-top:1em;
        width:100%;
    }
    .link-container{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:clamp(10px, 2.56vw, 20px) 0px;
        padding:clamp(24px, 6.67vw, 50px) 0px;
    }
    .link-container a{
        text-decoration:none;
        color:white;
        font-size:clamp(14px, 3.33vw, 27px);
        background-color:var(--theme-color);
        opacity:1;
        transition: opacity 0.3s ease;
        border-radius:50px;
        position:relative;
        display:block;
        padding: clamp(10px, 2.56vw, 20px) 0px;
        min-width: clamp(236px, 65.64vw, 492px);
    }
    .link-container a:hover{
        opacity:0.8;
    }
    .link-container a::after{
        content:"";
        display:block;
        position:absolute;
        background-image: url("../images/link-next.svg");
        background-size: contain;
        background-repeat: no-repeat;
        width: clamp(4px, 1.03vw, 8px);
        height: clamp(8px, 2.05vw, 16px);
        right: clamp(8px, 2.31vw, 17px);
        top: 45%;

    }

    /* center */
    #center-screen{
        display: none;
        position: absolute;
        top: 0; left: 0;
        width: 100%; 
        min-height: 100vh; 
        background: #fff; 
        z-index: 4000; 
        justify-content: center; 
        align-items: flex-start; 
        opacity: 0; 
        transition: opacity 1s ease;
    }
    .center-content1{
        display: block;
        position: relative;
        text-align: center;
        align-content: center;
        min-height: 100vh; 
        background-image: url("../images/sp/content1-bg-sp.jpg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        animation: floatBackground 8s infinite ease-in-out;
    }
    @keyframes floatBackground {
        0%, 100% {
            background-position: center center;
        }
        25% {
            background-position: calc(50% + 10px) calc(50% - 15px);
        }
        50% {
            background-position: calc(50% - 15px) calc(50% + 10px);
        }
        75% {
            background-position: calc(50% - 8px) calc(50% - 12px);
        }
    }

    .center-content1 h2{
        width:fit-content; 
        margin:auto auto; 
        font-size: clamp(16px, 3.85vw, 30px);
        font-weight: bold; 
        height: fit-content;
        line-height: clamp(32px, 8.97vw, 67px);
        color:#1a1a1a;
        text-align:left;
        padding:clamp(58px, 15.9vw, 120px) clamp(22px, 5.9vw, 45px);
        padding-bottom:clamp(48px, 13vw, 100px);
    }
    .center-content2{
        background: #004abc;
        padding-top:clamp(24px, 6.7vw, 50px);
    }

    .center-content2 h3{
        font-size: clamp(24px, 6.67vw, 50px);
        color: white;
        display: block;
        width:fit-content;
        margin: 0px auto clamp(19px, 5.38vw, 40px) auto;
        padding: clamp(19px, 5.38vw, 40px) 0px;
    }
    .center-content2 h3 img{
        display:block;
        width:clamp(246px, 68.21vw, 512px);
    }

    #lists-content ul{
        list-style: none;
        margin: 0 auto;
        padding: 0;
        width: clamp(336px, 93.33vw, 700px);
        padding-bottom:clamp(85px,10.4vw,200px);
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap:0px;
    }
    #lists-content ul li{
        border-radius: 16px;
        min-height: clamp(94px, 26.15vw, 196px);
        width:80%;
        padding: 0px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    #lists-content .content-container,
    #lists-content .link-container,
    #lists-content .title-img{
        display:none;
    }

    .modal-overlay .content-br{
        display:none;
    }
    .modal-content .title-container{
        display:block;
        margin: 0px auto;
        width: clamp(285px, 79.49vw, 595px);
    }
    #lists-content .content-br{
        display:block;
    }
    #lists-content .title{
        opacity:0;
    }
    #lists-content .subtitle{
        opacity:0;
    }


    #lists-content ul li:nth-child(odd) {
        left:clamp(9.6px,2.7vw,20px);
        
    }
    #lists-content ul li:nth-child(even) {
        top: 0px;
        right: -25%;
    }
    #lists-content ul li:nth-child(3) {
        margin-top: -10vw;
    }
    #lists-content ul li:nth-child(7) {
        margin-top: 10vw;
    }
    #lists-content ul li:nth-child(9) {
        margin-top: 10vw;
    }
    #lists-content ul li:nth-child(11) {
        top: 20vw;
    }


    .title-container .kakko svg{
        display:none;
    }
    #lists-content .kakko{
        display: flex;
        justify-content: space-between;
        padding-bottom:clamp(8.5px,1vw,20px);
    }
    #lists-content .kakko svg {
        height: clamp(21px, 5.9vw, 44px);
        width: auto;
        display: block;
        position:relative;
        top:0px;
    }
    #lists-content .kakko svg path {
        fill: none;
        stroke-miterlimit: 10;
        stroke-width: 5.5px;
        stroke: currentColor;
    }
    #lists-content .title{
        font-weight:Bold;
    }
    #lists-content .subtitle{
        font-weight:Bold;
    }
    #lists-content .lists-img {
        display: block;
        position: absolute;
        width:100%;
    }

    .page-logo img {
        width: clamp(105px, 29vw, 218px);
        height: auto;
        display: block;
        margin: auto auto;
    }

    .page-logo {
        width: 100vw;
        height: clamp(48px, 13.59vw, 101px);
        position: fixed;
        left: 0px;
        background-color: #fff;
        align-items: center;
        align-content: center;
        z-index: 999;
    }

    .to-top-btn .modal-logo {
        width: clamp(85px,10.4vw,200px);
        height: auto;
        display: block;
    }

    .footer{
        text-align: center;
        padding-top:clamp(85px,10.4vw,200px);
        padding-bottom :clamp(25.5px,3.1vw,60px);
    }
    .footer small{
        color:#ffffff;
        font-size: clamp(10px, 2vw, 15px);
        letter-spacing: 1px;
        font-weight: 100;
    }
    .to-top-btn{
        display:block;
        position:fixed;
        width:100%;
        bottom:clamp(33.6px, 9.3vw, 70px);
        margin:0px auto;
    }
    .to-top-btn span{
        display:block;
        width:clamp(336px, 93.33vw, 700px);
        margin:0px auto;
    }
    .to-top-btn a{
        display:block;
        width:fit-content;
        margin-left:auto;
    }
    #smooth-to-top img, #smooth-to-center img{
        cursor: pointer;
        padding: 0;
        outline: none;
        display:block;
        width:clamp(48px, 13.59vw, 101px);
        height:auto;
        transition: transform 0.3s ease, filter 0.3s ease;
    }
    #smooth-to-top img:hover, #smooth-to-center img:hover {
        transform: translateY(-5px);
        filter: brightness(1.1);
    }
    .content-box{
        height:35vh;
        padding-top:clamp(72px, 20vw, 150px);
    }
    .title-container .sp-size{
        display:inline-block;
        font-size: 0.5em;
    }

    .pc{
        display:none!important;
    }
}