@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap');

:root{--font_Kure: 'Zen Kurenaido', 'Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif !important;}
:root{--font_zenkaku: 'Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif !important;}
:root{--font_Dancing: 'Dancing Script', cursive;}

.con1_title,.intro_title, #contents .con_title,h3,h2,h4,h5,h6,.contact_bt,  .more, a[href^="tel:"], #page_title p, .con_no, .pager li a,#intro .intro_back,#cms_5-c .box_txt1::before,#cms_5-c .box_title1::before,.cms_5-c .box_txt1::before,.cms_5-c .box_title1::before{font-family:var(--font_Kure)}
body, .font_sans-serif,.font_serif{font-family:var(--font_zenkaku) }
.con_no01,.con_no02,.con_no03,#top_cms .cms_sub_title,#page_top a,#page_title p{font-family:var(--font_Dancing) }

html, body {font-size: 15px;}
/* color ---------------------------------------------------------------------------------------------*/
:root{
    --color1:#261911;
    --color2:#37281e;
    --color3:#714123;
    --color4:#54453d;
    --color5:#261911;    
    --white:#f2efe9;
    --black:#f2efe9;
    --gray:#cccccc;
    --blue:#102dbf;
    --neon:#3efff5;
}

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(--black);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--black);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--black);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--black);} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: var(--black);} /* アクセントカラー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(--color5);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: var(--color3);} /* アクセントカラー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(--white);
          border-bottom:solid 1px;
          transition: 0.5s;
}
body#body {
    background: var(--white);}
ul.footer_nav {background: #2c201a;}
/* color ---------------------------------------------------------------------------------------------*/


/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.video {
    max-height: calc(100vh - 100px) !important;
    min-height: calc(100vh - 100px) !important;
    object-fit: cover !important;
    width: calc(100% - 150px) !important;
    height: calc(100vh - 100px) !important;
    box-sizing: border-box;
    bottom: 0;
    top: inherit;
    position: absolute !important;
    transform: translate(-0%, -0%) !important;
    right: 0% !important;
    z-index: 1;
    left: inherit;
}

#main_img .main_bg {opacity: 0;}

.catch img {
    max-width: 450px;
    position: absolute;
    top: calc(50% + 100px);
    left: calc(-3% + 100px);
    transform: translate(0%,-65%);
    z-index: 2;
    opacity: 0.9 !important;
}

#main_img .main_bg {
    opacity: 1;
    background-image: url(dup/img/bg_img.jpg);
    background-color: transparent;
    z-index: 0;
    background-size: 1500px;
}

/*コンテンツ追加---------------------------------------*/
#contents_add .con3_box{padding: 100px 50px;}
#contents_add .con3_txt{
    padding-left: 20px;
    padding-right: 20px;}
@media screen and (max-width: 667px){
#contents_add .con3_box{padding: 100px 20px;}
#contents_add .con3_txt{
    padding-left: 0;
    padding-right: 0;}
}
/*コンテンツ追加---------------------------------------*/

/*ネオン---------------------------------------------------*/
section#contents1 span span,#page_top a,.more a:hover .hvr_more_span{
    text-shadow: 0px 0px 39px var(--blue);
    color: var(--neon) !important;
    animation: flicker 2s infinite alternate;        }

section#contents1 span span,#page_top a{font-family:var(--font_Kure);}
#page_top .scroll_u .scroll_bar{
    /*box-shadow: 0px 0px 39px var(--blue);*/
    background: var(--neon) !important;}

@keyframes flicker {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.2rem -0.2rem 1rem var(--blue),
            0.2rem 0.2rem 1rem var(--blue),
            0 0 2rem var(--blue),
            0 0 4rem var(--blue),
            0 0 6rem var(--blue),
            0 0 8rem var(--blue),
            0 0 10rem var(--blue);
    }
    
    20%,24%, 55% {        
         text-shadow:none;}    
    
}

#page_top a,.more a:hover .hvr_more_span{
    text-shadow: 0px 0px 6px var(--blue);
    color: var(--neon) !important;
    animation: flicker02 2s infinite alternate;        }
    
@keyframes flicker02 {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.2rem -0.2rem 6px var(--blue),
            0.2rem 0.2rem 6px var(--blue),
            0 0 6px var(--blue),
            0 0 7px var(--blue),
            0 0 9px var(--blue),
            0 0 11px var(--blue),
            0 0 13px var(--blue);
    }
    
    20%,24%, 55% {        
         text-shadow:none;}    
    
}



/*ネオン---------------------------------------------------*/

section#contents1 .con1_txt {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    font-size: 15px;}


/*==================================================
じわっ
===================================*/

.blur{
  animation-name:blurAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
じわっ 画像
===================================*/

/* ぼかしから出現 */
.blur_main01{
  animation-name:blurAnime_main01;
  animation-duration:2s;
  animation-fill-mode:forwards;
}
.blur_main02{
  animation-name:blurAnime_main02;
  animation-duration:3.2s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime_main01{
  from {
  filter: blur(10px);
  }

  to {
  filter: blur(0);
  }
}

@keyframes blurAnime_main02{
  from{
  opacity: 0;
  filter: blur(10px);
  }
  to{
  opacity: 1;      
  filter: blur(0);
  }
}
/*==================================================
じわっ 画像
===================================*/


h3.con1_title span {font-size: 33px;}

#contents1 .con1_title::before {
    width: 40px;
    height: 1px;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;}
    
.intro_txt01, .intro_txt02 {
    display: block;
    margin-bottom: 20px;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 2;
    font-family: var(--font_Kure);}

span.intro_txt02 {margin-bottom: 45px;}
p.con_no {font-size: 40px;}

.con_no_wrap.d_inline_b.fadetrans::before{width: 50px !important;}
.con_no_wrap {margin-bottom: 15px;}
.con_no_wrap.d_inline_b::before{
    top: 8px;
    background: var(--white);}
    
h3.con3_title, h3.con2_title {
    font-size: 14px;
    padding-left: 1px;}
    
#contents3 .con3_box, #contents_add .con3_box {background-image: url(dup/img/con_bg.jpg); background-size: cover;}
#contents2 .con2_box{background-image: url(dup/img/con_bg.jpg); background-size: cover;}

#top_cms .cms_box {
    background-image: url(dup/img/bg_img.jpg);
    background-size: 1500px;}
    
#top_cms .cms_title span {height: 1px;}
#contents1 .con1_bg {background: var(--color1);}
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
li.contact_bt a {
    border: solid 1px var(--white);
    background: transparent;}

/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page02, #page03, #page04, #page05, #page06, #page07, #page08, #page09, #page10 {
    background-image: url(dup/img/bg_img.jpg);
    background-size: 1500px;}
#cms_2-f .box_title1::after {top: 19px;}

#page_title p {
    left: 0;
    top: 174px;
    line-height: 1.2;}
/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width: 1280px){
    .catch img {max-width: 350px;}}

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

#main_img {height: 70vh !important;}



#main_img {height: calc(100vh - 60px) !important;}
.catch img {
    max-width: 450px;
    position: absolute;
    top: calc(50% + 100px);
    left: calc(-2% + 100px);
    transform: translate(0%,-65%);
    z-index: 2;
    opacity: 0.9 !important;
}
section#contents1 .con1_txt {
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
    font-size: 14px;
    padding: 0;
}
section#contents1 {background-position: top left 45%;}

#main_img {height: calc(60vh - 60px) !important;}

.video {
    max-height: calc(60vh - 50px) !important;
    min-height: calc(60vh - 50px) !important;
    object-fit: cover !important;
    width: calc(100% - 0px) !important;
    height: calc(60vh - 50px) !important;
    box-sizing: border-box;
    bottom: 5%;
    top: inherit;
    position: absolute !important;
    transform: translate(-0%, -0%) !important;
    right: 0% !important;
    z-index: 1;
    left: inherit;
}

.catch img {
    max-width: 300px;
    position: absolute;
    top: inherit;
    bottom: 10%;
    left: calc(-10% + 100px);
    transform: translate(0%,0%);
    z-index: 2;
    opacity: 0.9 !important;
}

    #page_title p {top: 100px;} 
}

@media screen and (max-width: 667px){
    #main_img {height: 70vh !important; }
    .topimg01 {
        width: calc(100% - 50px);
        height: calc(70vh - 50px);
        box-sizing: border-box;
        top: inherit;
        transform: translate(0%, 0%);
        bottom: 0 !important;}
    li.contact_bt {margin: 0 44px 0 0;}
    .catch img {
        max-width: 200px;
        position: absolute;
        top: calc(50% - 70px);
        left: 5%;
        transform: translate(0%,-50%);
        z-index: 1;
        opacity: 0.9 !important;}
    h3.con1_title span {
        font-size: 19px;
        letter-spacing: 2.3px;}   
    .intro_txt01, .intro_txt02 {
        display: block;
        margin-bottom: 15px;
        font-size: 15px;
        letter-spacing: 1.5px;
        line-height: 2;
        font-family: var(--font_Kure);}     
    #contents_add .con3_box {padding: 80px 20px;}       

    #cms_2-f .box_title1::after {top: 16px;}
    #cms_3-e .sub_cate_txt1 {padding: 5px 10px;}
    #cms_3-e .sub_cate_box {margin-bottom: 50px;}
    section#contents1 {background-position: top left 5%;}
    
    #main_img {height: 50vh !important;}
    .video {
        max-height: calc(50vh - 0px) !important;
        min-height: calc(50vh - 0px) !important;
        object-fit: cover !important;
        width: calc(100% - 0px) !important;
        height: calc(50vh - 0px) !important;
        box-sizing: border-box;
        bottom: 0;
        top: inherit;
        position: absolute !important;
        transform: translate(-0%, -0%) !important;
        right: 0% !important;
        z-index: 1;
        left: inherit;}
    .catch img {
        max-width: 200px;
        position: absolute;
        top: inherit;
        left: 5%;
        transform: translate(0%,-0%);
        z-index: 2;
        opacity: 0.9 !important;
        bottom: 6%;}        
    #page_title p {top: 80px;}        
}