@charset "utf-8";
/* 1536 , 1530 × 735 ,1366 *//* ←記画面幅でも崩れていないか確認 */

/* カテゴリリンクの飛び先位置の数値を適宜調整してください */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#fix_menu ul {
    font-size: 16px;
}

#loading_line .line {
    background-color: #beed86;
}

header #logo h1 {
    width: 80% !important;
}


:root {
            --cursor-x: 50%;
            --cursor-y: 50%;
            --spotlight-color: rgb(255 237 170 / 45%);
            --spotlight-size: 310px;
            --bg-color: #f8f8f8;
            --scroll-speed: 30s; /* 数値を小さくすると速くなります */
        }
        
.spotlight-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* 下の要素をクリック可能にする */
            z-index: 9999;
            background: radial-gradient(
                var(--spotlight-size) circle at var(--cursor-x) var(--cursor-y),
                var(--spotlight-color) 0%,
                transparent 70%
            );
            transition: background 0.1s ease-out;
            /* ここに背景色とフィルターを追加 */
    background: var(--spotlight-color); /* グラデーションではなく単色にする */
    backdrop-filter: brightness(1.3)contrast(200%);
    -webkit-backdrop-filter:brightness(1.3)contrast(200%); /* Safari用 */

    /* マスクを適用して、カーソル位置だけを「表示」させる */
    -webkit-mask-image: radial-gradient(
        var(--spotlight-size) circle at var(--cursor-x) var(--cursor-y),
        black 0%,      /* blackの部分だけフィルターが見えるようになる */
        transparent 70% /* 外側は透明になり、フィルターが無効化される */
    );
    mask-image: radial-gradient(
        var(--spotlight-size) circle at var(--cursor-x) var(--cursor-y),
        black 0%,
        transparent 70%
    );
        }
        




/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .l-gh__scrollnav {
        position: fixed;
    }
    
    header #logo h1 img {
            width: 250% !important;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    header #logo {
        width: 100% !important;
    }
    
    header #logo h1 img {
            width: 170% !important;
    }

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.main_copy {
    width: 51vw;
    max-width: 960px;
    min-width: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

  .main_copy_sp2 {
    width: 112%;
    height: 300px;
    bottom: -30%;
    left: 0;
    z-index: 2;
    background-image: url('/Files/img/main_copy_sp2.png');
    background-image: url(/Files/img/main_copy_sp2.png);
    background-size: 300px;
    background-repeat: repeat-x;
    opacity: 0;
    }
    
    @keyframes copy {
            0% {
                background-position: -100% 50%;
            }
            100% {
                background-position: 100% 50%;
            }
        }



/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .main_copy {
        width: 83vw;
        max-width: 660px;
        min-width: 450px;
        top: 54%;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    /* .main_copy {
        width: 80vw;
        max-width: 300px;
        min-width: 200px;
        top: 54%;
    } */
    
    .main_copy_sp1 {
        width: 68vw;
        max-width: 300px;
        min-width: 240px;
        bottom: 18%;
        left: 5%;
        z-index: 3;
        transform: skew(-4deg, -10deg);
    }
    
    .main_copy_sp2 {
        height: 130px;
        opacity: 1;
        animation: copy 10s linear infinite;
        bottom: 0;
        background-size: 200%;
    }
 

    
    

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#top_contents1 {
    background-image: url('/Files/img/intro_bg1.png');
    background-size: cover;
    background-position: center center;
    background-color: rgba(255, 255, 255, 0.4);
    background-blend-mode: lighten;
}

#top_contents1 .catch_txt .title h2 {
    font-size: min(4vw, 39px);
}

#top_contents2 .title h2 {
    font-size: min(1.8vw, 30px);
    color: var(--color1);
}

.intro_bg2 {
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 0;
}

.text_image {
    font-size: min(1vw, 16px);
    right: 1%;
    bottom: -6%;
    z-index: 1;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #top_contents2 .title h2 {
        font-size: min(5vw, 28px);
    }
    
    .text_image {
        font-size: min(2vw, 18px);
        right: 5%;
        bottom: auto;
        top: -4%;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #top_contents1 {
        background-image: url('/Files/img/intro_bg1_sp.png');
        background-color: rgba(255, 255, 255, 0.6);
    }
    #top_contents1 .catch_txt .title h2 {
        font-size: min(6vw, 25px);
    }
    .cms_5-b .cate_box .arrow {
        left: 10px;
    }
    
    .cms_5-b .cate_box .open_bt .box_title1 {
        margin-left: 90px;
    }
    
    .intro_bg2 {
        width: 160%;
        left: -29%;
    }
    
    .text_image {
        font-size: min(3vw, 16px);
        right: 7%;
        bottom: auto;
        top: -2%;
    }

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*カテゴリリンクの飛び先位置を調整する*/
/* --- PC --- */
:root {
--header-height: 50px;
}

.rectangle_img img {
    aspect-ratio: 1.5;
}

#page_title .page_title_inner {
    padding: 180px 20px;
}

.cate_list a {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page8 #tel_txt .title {
    color: var(--color1);
}

/* --- タブレット --- */
@media screen and (max-width: 768px){
:root {
    --header-height: 100px;
    }
    
    #page2,#page3,#page4,#page5,#page6,#page7,#page8,#page9,#page10 {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    #page_title .page_title_inner {
        padding: 140px 20px;
    }
}
/* --- スマートフォン --- */
@media screen and (max-width: 667px){
:root {
--header-height: 100px;
}
    #page_title .page_title_inner {
        padding: 90px 20px;
    }
}





/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}