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

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

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


/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
body {
    overflow: hidden;
}

#fakeloader .fl {
    max-width: 200px;
}

.header {
    z-index: 9999;
}

.logo1 {
    max-width: 120px;
}

.f_contact_img {
    height: 510px;
}

.footer_contact h4 {
    padding-bottom: 3%;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .f_contact_img {
        height: 560px;
    }
    
    #sp_nav .l-menu ul li a {
        font-size: 20px;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #fakeloader .fl {
        max-width: 140px;
    }

    #sp_nav .l-menu ul li a {
        font-size: 14px;
    }
    
    .header .logo1 {
        max-width: 100px;
        padding-left: 10px;
    }
    
    
    .f_contact_img {
        height: 410px;
    }
    
    .f_contact_box {
        bottom: -160px;
    }
    
    .footer_contact h4 {
        font-size: min(9vw, 35px);
    }
    
    .footer {
        padding: 200px 0px 100px;
    }
    
    .footer .footer_sitemap .logo2 a {
        max-width: 150px;
    }

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
:root {
    --gradient-sunshine: linear-gradient(135deg, #FFC107 0%, #FF9800 50%, #FF5722 100%);
    --gradient-bg: linear-gradient(180deg, #FFF9E6 0%, #FFFFFF 100%);
}

#main_img {
    height: 100vh;
    background: var(--color-bg);
    background-image: var(--gradient-bg);
}

.main_copy {
    height: 44vw;
    min-height: 560px;
    max-height: 840px;
    top: 50%;
    left: 50%;
    transform: translate(-64%, -30%);
    z-index: 1;
}

.main_copy img {
    width: auto;
    height: 100%;
}

.sub_copy {
    width: 17vw;
    min-width: 260px;
    max-width: 450px;
    right: -2%;
    bottom: -4%;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #main_img {
        height: 85vh;
    }

    .main_copy {
        height: 100vw;
        min-height: 720px;
        max-height: 840px;
        top: 50%;
        left: 50%;
        transform: translate(-68%, -50%);
    }
    
    .sub_copy {
        width: 40vw;
        min-width: 270px;
        max-width: 450px;
        right: -6%;
        bottom: 3%;
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .main_copy {
        height: 119vw;
        min-height: 360px;
        max-height: 470px;
        transform: translate(-69%, -50%);
    }
    
    .sub_copy {
        width: 60vw;
        min-width: 180px;
        max-width: 310px;
        right: -11%;
        bottom: 3%;
    }

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Canvas Overlay */
#overlay-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: color; /* Makes everything underneath inherit the canvas color/saturation, creating monochrome */
}

/* Hero Section */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8rem 5% 6rem;
  min-height: 80vh;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,193,7,0.4) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  z-index: -1;
  filter: blur(40px);
}

#con1 .title {
    font-size: min(3vw, 40px);
    color: var(--color1);
}

.con1_inner {
    color: white;
}

.con1_squ span {
    z-index: 2;
}

#con1,#con2 {
    background-color: #070707;
}

#con2 .title {
    font-size: min(3vw, 30px);
}

#con2 .font_15 {
    color: white;
}

#con3 .title .en {
    font-size: min(3vw, 40px);
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #con1 .title {
        font-size: min(4vw, 32px);
    }
    
    #con2 .title {
        font-size: min(4vw, 30px);
    }
    
    #con3 .title .en {
        font-size: min(5vw, 32px);
    }

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #con1 .title {
        font-size: min(6vw, 26px);
        line-height: 1.6;
    }
    
    #con2 .title {
        font-size: min(6vw, 26px);
        margin-bottom: 20px;
    }
    
    #con3 .title .en {
        font-size: min(8vw, 32px);
    }

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.pagetitle_img {
    background-position: center 12%;
}
#cms_5-d .cate_box {
    line-height: 1.5;
}

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

/*カテゴリリンクの飛び先位置を調整する*/
/* --- PC --- */
:root {
--header-height: 150px;
}
/* --- スマートフォン --- */
@media screen and (max-width: 667px){
:root {
--header-height: 100px;
}
}





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

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    .pagetitle_img {
        background-position: 45% 19%;
    }


}