/* ------------- my css ------------- */

body{
    font-size: 16px;
}

/* color */

:root{
    --color1: #262626; 
    --color2: #e5d9a8; 
    --color3: #c4b36c; 
    --color4: #ea6aa4; 
    --black: #151a1e; 
}

.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}


/*自動リンク設定*/
.linkStyle{
    color:var(--color2);
}
.linkStyle:hover{
	opacity:0.7
}

/*#wrap{
    min-width: 1200px;
}

@media screen and (max-width: 768px) {
    #wrap{
    min-width: auto;
}
}*/

.point_no{
    pointer-events: none;
}
/*------------- header -------------*/
.top #header{
    background-image: linear-gradient(0deg, transparent, #262626);
}

#header #logo .width_100 {
    width: 140px;
}
.top #header.headtrans {
        background-image:none;
}
#header.headtrans {
    background-color: rgba(188, 171, 100, 0.8) !important;
}
@media screen and (max-width: 768px) {
.top #header {
    background-image: none;
}
#sp_nav .bg_color2{
    background-color: var(--color3);
}
#sp_nav li a{
    font-size: 20px;
    padding-top: 10px;
}
#sp_nav li.border_so1-t{
    display: none;
}
.contact_bt .bg_color3{
    border-color: #fff;
    background-color: transparent;
}


}
@media screen and (max-width: 667px) {
    #sp_nav li a{
    font-size: 16px;
    }
    #sp_nav ul{
        padding-top: 100px;
    }
}


/*------------- FV -------------*/
#particles-js {
    top: 0;
    left: 0;
    z-index: 1; 
}

.main_item1{
        mix-blend-mode: lighten;
    width: 70%;
    top: 43%;
    transform: translate(0, -50%);
}
.main_item2{
    z-index: 2;
    mix-blend-mode: screen;
}
.meishi-fv{
    width: 50%;
    max-width: 800px;
    right: 6%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 2;
}
.main_txt{
    z-index: 2;
    width: 50%;
    max-width: 620px;
    left: 10%;
    top: 48%;
    transform: translate(0, -50%);
    mix-blend-mode: color-dodge;
}

@media screen and (max-width: 1660px) {
    .meishi-fv {
    width: 40%;}
}
@media screen and (max-width: 1350px) {
    .main_txt { 
    width: 40%;}
}

@media screen and (max-width: 768px) {
    #main_img {
        height: 80vw !important;
    }
    .main_item1 {
    top: 68%;
    }
    .main_item2 {
        bottom: 0;
    }
    .meishi-fv {
                width: 60%;
        top: auto;
    bottom: 0;
    right: auto;
    left: 50%;
    transform: translate(-50%, 0);
    }
    .main_txt {
        width: 68%;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
}
@media screen and (max-width: 667px) {
    #main_img {
        height: 100vw !important;
    }
        .main_txt {
        width: 80%;
        top: 27%;
        }
        .meishi-fv {
    width: 80%;
        }
}

/*------------- TOP -------------*/

#intro::after {
    content: '';
    position: absolute;
    bottom: -13%;
    right: -7%;
    width: 56%;
    height: 100%;
    z-index: 1;
    background-image: url(/Files/img/con1_item1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: lighten;
}

.intro_title .pc_txt{
    font-size: 40px;
    color: var(--color2);
}
#contents1 .con1_bg{
        opacity: 0.4;
    mix-blend-mode: darken;
    
}
.con1_title .pc_txt{
    font-size: 36px;
}
.con2_title .pc_txt,.con3_title .pc_txt{
    font-size: 30px;
}

#top_cms .con_item2{
    width: 50%;
    max-width: 660px;
    top: -10%;
    left: 0;
}

#top_cms .main_item2_cms{
    width: 80%;
    max-width: 800px;
    top: -10%;
    right: 0;
    mix-blend-mode: screen;
}
@media screen and (max-width: 776px) {
    #intro::after {
    bottom: -30%;
        width: 100%;
}
}



@media screen and (max-width: 667px) {
        #intro::after {
        bottom: -35%;
        }
.intro_title .sp_txt{
    font-size: 28px;
    color: var(--color2);
}
.con1_title .sp_txt{
    font-size: 22px;
}
.con2_title .sp_txt,.con3_title .sp_txt{
    font-size: 22px;
}
#top_cms .con_item2{
    width: 70%;
    top: -3%;
}
.page_title_txt{
    padding-top: 80px;
    margin-bottom: 10px;
}
    #top_cms .cms_sub_title {
        top: 70px;
    }

}


/*------------- footer -------------*/
.contact_bt .bg_color2{
    background-color: var(--color4);
}

.footer_wrap {
    background-image: url('/Files/img/footer_bg.png');
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
}


/*------------- 下層 -------------*/
.cate_list li a{
    background-color: var(--color3);
}
#page_title .page_title_bg.opacity07{
    opacity: 0.3;
}
@media screen and (max-width: 667px) {
    #page_title {
        padding: 50px 0;
    }
}
/*------------- 納品までの流れ -------------*/


#cms_5-f .cate_box .open_bt .box_title1::before, .cms_5-f .cate_box .open_bt .box_title1::before {
    display: none;
}


/*------------- fix_bnr -------------*/

#fix_bnr {
    bottom: 20px;
    right: 30px;
    z-index: 4;
    width: 70%;
    max-width: 400px;
    transition: 0.7s;
    margin: auto;
}

#fix_bnr:hover{
    opacity: 0.7;
}


@media screen and (max-width: 768px){
#fix_bnr{
    max-width: 400px;
}
#fix_bnr.is-hidden{
    transform: translateX(200px);
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 77% !important;
    right: auto;
    left: 20px;
    margin: auto;
    bottom: 10px;
}
}

.vibrate-realistic, #fix_bnr a:hover img {
  animation: realisticVibrate 2s infinite;
  display: inline-block;
}

/* fix_bnr end ---------------------------------------------------------------------------------------------*/