@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda+SC:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');

:root{
    --bk: #0a1014;
    --bk2: #111b21;
    --color1: #484848;
    --sl: #c5c5c5;
    --normal: #ffffff;
        --color3: #cec5ac;
}

.bg_color5, .hvr_bg_color5:hover {
    background-color: var(--bk);
}

.border_color3, .hvr_border_color3:hover {
    border-color: #484848;
}

.txt_color1, .hvr_txt_color1:hover {
    color: var(--sl);
}

header::before {
    height: 3px;
}

body{
    background-color: var(--bk);
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

.font_mon{
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}

#header.active {
    background-color: transparent;
        mix-blend-mode: difference;
}

div#loader{
    background-color: var(--bk);
}

#loader .count {
    opacity: 0.4;
    font-size: 60px;
}

#loader .count.opacity1 {
    opacity: 1;
}

.font_mon_l {
    font-family: "Bodoni Moda SC", serif;
    font-style: normal;
}

h4.box_title1{
    font-size: -webkit-calc(1rem + 10px);
    font-size: calc(1rem + 10px);
}

ul.cate_list a{
    background-color: transparent;
    border: 1px solid var(--sl);
}

ul.cate_list a:hover{
    background-color: var(--color1);
    border: 1px solid var(--color1);
}

#cms_3-e div.cate_title{
        color: black;
    padding-left: 10px;
    font-weight: bold;
}

#bottom_tel a {
    background-color: #23282c;
}

.bg_color2, .hvr_bg_color2:hover {
    background-color: #151c22;
}

div.time{
    display: none;
}

#footer_info .info_title{
    opacity: 1;
}

#page08 div.tel_wrap a{
    color: #c2c5ac;
}

/*#top_contents2:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: ;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 60%;
    pointer-events: none;
}*/

section#top_contents2 div.con2_txt_wrap{
    background-image: url(/files/img/yatai.png);
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
}

#top_contents3 .con3_no {
    mix-blend-mode: difference;
}

section#con_nav li a{
    mix-blend-mode: difference;
}

div.swiper-container{
    display: none;
}

#main_img > img{
        object-fit: cover;
    height: 100%;
}

#main_img:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(/files/img/copy.png), url(/files/img/hito.png);
    background-position: center right, top left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: 900px, 1550px;
    pointer-events: none;
}

header{
    padding: 7px 0;
}

#wrap{
    min-width: 1280px;
}

figure.nav_icon{
    display: none;
}

#top_cms div.cms_box{
    border: none;
}

#sp_nav li a{
    color: white;
}

.cate_title.bg_color3{
    color: black;
}

.cms_box_wrap .cms_2-g h4.box_title1{
    color: black;
}

div#bottom_tel a span.txt_color5{
    color: #a4a4a4;
}

a.linkStyle{
    color: var(--color3);
}

#top_contents2 > span{
    background-color: white;
}

#pc_nav li a{
    font-family: 'Noto Sans JP', 'Comfortaa', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #wrap{
        min-width: 100%;
    }
    
    div.logo_wrap {
        width: 120px;
    }
    
    header{
        padding: 0 !important;
    }
    
    #main_img:before {
    background-size: 85%, 120%;
    pointer-events: none;
}
    
        #main_img {
        height: 90vw;
    }
    
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    #main_img {
        height: 110vw;
    }
    
    section#top_contents2 div.con2_txt_wrap {
    background-size: 45%;
}
    
    #header.active {
    background-color: black;
}
    
    footer div#logo2{
        display: none;
    }
 
 #header.active h1#logo{
     opacity: 0;
     transition: all 0.3s;
 }
    
    header{
        height: auto !important;
    }
    
    #page_title{
        margin-bottom: 50px;
    }
    
    #top_contents3 .con3_no{
            font-size: 70px;
    }
    
   #cms_2-g div.cate{
       margin-bottom: 150px;
   }
    
}