@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
  
:root{--font_zenkaku: 'Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif !important;}
.con1_title,.intro_title, #contents .con_title,h3,h2,h4,h5,h6,.overlay .overlay-nav .en{font-family:var(--font_zenkaku)}

/*旧カラー*/
/*:root{*/
/*    --color1:#636363;*/
/*    --color2:#b5b5b5;*/
/*    --color3:#bfbfbf;*/
/*    --color4:#d5d5d5;*/
/*    --color5:#8e8e8e;    */
/*    --white:#FFFFFF;*/
/*    --black:#303030;*/
/*    --gray:#d5d5d5;*/
/*}*/

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.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 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color5);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.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_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.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);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}
.linkStyle{color: var(--color1);
          border-bottom:solid 1px;
}
.blur {background: #f3f3f3 !important;}

/*装飾に便利なposi_rel*/
#contents_box,#contents1,#contents2,#contents3,#contents,.con1_outer, .con2_outer, .con3_outer,.img5, .img6, .img7,div#left,div#right,div#intro_wrap,#contents2_wrap{position: relative;}
/*装飾に便利なposi_rel*/
/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before, .con2_outer::before,.con2_outer::after,.con3_outer::before,.con3_outer::after,#page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before,#contents2::before,div#contents2::after,#page_title .title_img::after,#contents::before,.img5::before, .img6::before, .img7::before,div#left::before,div#right::before,div#intro_wrap::before,div#intro_wrap::after,#contents2_wrap::before,#contents::after{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}
/*装飾に便利な疑似クラス設定*/
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img:before {
    background-color: rgba(0,0,0,0.15);
    background: linear-gradient(229deg, rgb(213 213 213 / 10%) 0%, rgb(123 123 123 / 20%) 100%);
}
    
.item01 img {
    z-index: 1;
    top: 0;
    left: -1%;
    width: 15vw;
}
.item02 img {
    z-index: 1;
    bottom: -10%;
    right: 0;
    width: 23vw;
}
.catch img {
    z-index: 1;
    width: 38vw;
    top: 50%;
    left: 22%;
    transform: translate(-47%, -50%);
}
section#contents .con_title {
    font-size: 40px;
    margin-bottom: 25px;}
    
#contents::before {
    background: url(dup/img/item03.png);
    width: 9%;
    height: 32%;
    right: 0%;
    top: -25%;
    background-repeat: no-repeat;}

#contents::after {
    background: url(dup/img/item04.png);
    width: 9%;
    height: 32%;
    left: 0%;
    bottom: -35%;
    background-repeat: no-repeat;}
h3.modal_title_sub {display: none;}
.modal_txt_wrap {padding-left: 0;}
span.slash.slash2 {color: var(--color2);}

#top_cms .cms_title .bar {
    content: '';
    display: inline-block;
    width: 120px;
    height: 2px;
    position: absolute;
    top: -94px;
    left: -12%;
    transform: rotate(314deg);}
    
section.top_cms_box {background: rgb(213 213 213 / 30%);}
.cms_6-b .cate_box .box_txt2, #cms_6-b .cate_box .box_txt2 {background: var(--white);}

div#intro_wrap {
    background: rgb(255,255,255);
    background: rgb(213,213,213);
    background: rgb(213,213,213);
    background: linear-gradient(135deg, rgb(199 199 199) 0%, rgb(245 245 245) 9%, rgba(242,242,242,1) 49%, rgb(245 245 245) 88%, rgb(199 199 199) 100%);
}
    .top_title .slash:before, .top_title .slash:after {background-color: var(--color5);}
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

p.tel_bt a, .contact_bt a {background: var(--color1);}

/*#loading{position:relative}*/
div#loading::before{
    content: '';
    position: absolute;
    background: rgb(142,142,142);
    background: linear-gradient(180deg, rgba(142,142,142,1) 0%, rgba(181,181,181,1) 20%, rgba(191,191,191,1) 49%, rgba(181,181,181,1) 60%, rgba(142,142,142,1) 100%);
    width:100%;
    height:100%;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


div#page_title_img {
    background: url(dup/img/page_title.jpg);
    background-size: cover;
    background-position: top 35% center;}


/*タブレット*/
@media screen and (max-width: 768px){
    .scroll{display:none;}
    div#main_img,#video {height: 50vh;}
    #video video {
        width: auto!important;
        height: 100%;}
    .menu-trigger {top: 65% !important;}
    .close-trigger {top: 85% !important;}
    .catch img {
        z-index: 1;
        width: 43vw;
        top: 50%;
        left: 20%;
        transform: translate(-41%, -55%);}
    section#contents .con_title, h3.intro_title1 {font-size: 35px;}
    .portrait_img img {transform: translate(-59%,-50%);}    
    figure.intro_img2 {margin-top: 50px;}
    #contents::after {
        background: url(dup/img/item04.png);
        width: 11%;
        height: 12%;
        left: 0%;
        bottom: -15%;
        background-repeat: no-repeat;
        background-size: 100%;}
    #contents::before {
        background: url(dup/img/item03.png);
        width: 11%;
        height: 12%;
        right: 0%;
        top: -7%;
        background-repeat: no-repeat;
        background-size: 100%;}
    #top_cms .cms_title .bar {
        content: '';
        display: inline-block;
        width: 100px;
        height: 2px;
        position: absolute;
        top: -40px;
        left: -12%;
        transform: rotate(311deg);}
    #video {height: 53vh;}
}


/*スマホ*/
@media screen and (max-width: 667px){
    
    #video {height: 53vh !important;}
    .item02 img {
        z-index: 1;
        bottom: -5%;
        right: 0;
        width: 34vw;}
    .catch img {
        z-index: 1;
        width: 44vw;
        top: 50%;
        left: 20%;
        transform: translate(-41%, -50%);}
    section#contents .con_title, h3.intro_title1 {font-size: 24px;}
    .modal-box .inner {padding: 20px;}
    .modal-box .modal-close span {
        width: 40px;
        height: 40px;}

    #contents::after {
        background: url(dup/img/item04.png);
        width: 14%;
        height: 10%;
        left: 0%;
        bottom: -12%;
        background-repeat: no-repeat;
        background-size: 100%;        
    }
    #contents::before {
        background: url(dup/img/item03.png);
        right: 0%;
        top: -7%;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 14%;
        height: 10%;}
    #top_cms .cms_title .bar {
        content: '';
        display: inline-block;
        width: 90px;
        height: 2px;
        position: absolute;
        top: -30px;
        left: -14%;
        transform: rotate(311deg);}
    #page_title_img {height: 200px;}
    #cms_2-g .cate_title {
        font-size: 1.6em !important;
        letter-spacing: 1px;}
}



/*スクロール修正*/

@media screen and (max-width: 1600px){

p.modal_txt {
    overflow: scroll;
    height: 20vh;
}
p.modal_txt span {
    min-height: 200px;
}
}

@media screen and (max-width: 768px){
p.modal_txt {
    overflow: inherit;
    height: inherit;
}}



/*20221221--------------------------------------------------------------------------*/


/*20221223--------------------------------------------------------------------------*/
/*新カラー*/
:root{
    --color1:#636363;
    --color2:#b5b5b5;
    --color3:#ebebeb;
    --color4:#ebebeb;
    --color5:#8e8e8e;    
    --white:#FFFFFF;
    --black:#303030;
    --gray:#d5d5d5;
}
div#intro_wrap {
    background: rgb(255,255,255);
    background: rgb(213,213,213);
    background: rgb(213,213,213);
    background: transparent;
}

.blur {
    background: rgb(255,255,255);
    background: rgb(213,213,213);
    background: rgb(213,213,213);
    background: linear-gradient(135deg, rgb(64 64 64) -3%, rgb(82 82 82) 7%, rgb(84 84 84) 23%, rgb(171 171 171) 76%, rgb(38 38 38) 118%) !important;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--white);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--white);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--white);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color4);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--color4);} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color4);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--color1)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.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(--color5);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color2);} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
#intro .intro_photo h2 {
    color: var(--color3);}
    
span.slash.slash2 {color: var(--color4);}
.slash:before, .slash:after {background-color: var(--color3);}
    
.scroll.posi_abs {display: none;}

.modal-box .inner,.modal-box:before {background: var(--color5);}
.cms_6-b .cate_box .box_txt2, #cms_6-b .cate_box .box_txt2 {background: var(--color5);}
.cms_2-g .box_item{background: var(--color5);}
#cms_2-g .box_item {background: transparent;}
.cms_2-g .box_txt1,#cms_2-g .box_txt1 {color: var(--white) !important;}
#page_title .jp:before {background-color: var(--color3);}

span.more_item {background: var(--color5);}


div#loading::before {
    content: '';
    position: absolute;
    background: rgb(142,142,142);
    background: linear-gradient(180deg, rgb(110 110 110)  0%, rgb(161 161 161) 20%, rgb(167 167 167) 49%, rgb(161 161 161) 60%, rgb(110 110 110) 100%);}
    
#top_cms .cms_title .bar {background: var(--black)}