/* color */
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #484545} /* メインカラー */
.txt_color2{color: #333333} /* サブカラー */
.txt_color3{color: #555555} /* アクセントカラー1 */
.txt_color4{color: #e3e0cf} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #f7f6f6} /* メインカラー */
.bg_color2{background-color: #ffffff} /* サブカラー */
.bg_color3{background-color: #555555} /* アクセントカラー1 */
.bg_color4{background-color: #e3e0cf} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #484545}
.border_color2{border-color: #484545}
.border_color3{border-color: #555555}
.border_color4{border-color: #e3e0cf}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #484545} /* メインカラー */
.hvr_txt_color2:hover{color: #ffffff} /* サブカラー */
.hvr_txt_color3:hover{color: #555555} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #e3e0cf} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #484545} /* メインカラー */
.hvr_bg_color2:hover{background-color: #ffffff} /* サブカラー */
.hvr_bg_color3:hover{background-color: #555555} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #e3e0cf} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #484545}
.hvr_border_color2:hover{border-color: #ffffff}
.hvr_border_color3:hover{border-color: #555555}
.hvr_border_color4:hover{border-color: #e3e0cf}

.opacity07, .opacity08 {
    opacity: 1;
}
.txt_white {
	color: #333333;
}
#menu_bt, #scroll {
       background-color: #484545;
}

#pc_intro, #page_title {
    background-color: #f5f5f5;
background-image: url("https://www.transparenttextures.com/patterns/gplay.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
.sns_txt {
    left: 50%;
    transform: translateX(-50%);
}
.sns_txt {
    animation: pekopeko 2s infinite;
    /*box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);*/
}

@keyframes pekopeko {
    0% {
       /* box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);*/
        top: 0px;
    }
    10% {
       /* box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);*/
        top: 3px;
    }
    20% {
      /*  box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);*/
        top: 0px;
    }
    30% {
       /* box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);*/
        top: 3px;
    }
    40% {
       /* box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);*/
        top: 0px;
    }
}
.tel_bt a, .intro_bt a {
  background-color: #f7f6f6;
}
#contents h3 span {
    padding: 0 0 0 20px;
}
.welcome {
  position: relative;
  z-index: 1;
}
.camera {
    left: 41%;
    top: 9%;
    transform: translate(-34%, -47%);
    width: 76px;
}
.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}
.catch_box {
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
}
#main_left #footer_txt {
    position: absolute;
    padding: 5%;
    width: 80%;
    box-sizing: border-box;
    left: 10%;
    top: 2%;
    z-index: 1;
}
#cms_5-c .box_txt1::before {
    content: "A.";
    font-weight: bold;
    position: absolute;
    color: rgba(0,0,0,0.5);
    top: 8px;
    left: 13px;
    font-size: -webkit-calc(1rem + 8px);
    font-size: calc(1rem + 8px);
}
.links_bt:hover {
  opacity: 0.8;
}
.contac_box {
    display: flex;
}
#top_header .grid_6 {
    width: 30%!important;
}
#page9 .box .font_14_tb .bg_color1 {
    background-color: #555555;
    color: #fff;
}
#page9 .box .font_14_tb .bg_color1:hover {
    background-color: #fff;
    color: #555;
}
.mail_box a {
    font-size: 25px;
}
/*******  スライドカラー　***********/
.red::before {
    content: '';
    display: block;
    position: absolute;
    top: 83px;
    right: 0;
    width: 0;
    height: 10%;
    background: rgba(247,246,246,0.8);
    transition: 1s;
    z-index: -1;
    border-radius: 7px;
}
.fade::before {
  width: 100%;
}

/* ---------- 1748px ---------- */
@media screen and (max-width: 1748px){
.red::before {
    top: 80px;
    height: 128px;
}
}
/* ---------- 1400px ---------- */
@media screen and (max-width: 1400px){
.contac_box {
    display: block;
}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#contents .fs_wrap {
    width: 92%!important;
}
#contents .box_txt {
    width: 85%;
    margin: 0 auto;
}
#contents h3 {
    margin-bottom: 20vh;
    background-color: rgba(247,246,246,0.8);
    border-radius: 7px;
    padding: 10px 3px;
}
#contents h3 span {
    padding: 0 0 0 0px;
}
header #top_link .links_bt {
    top: 90% !important;
    width: 32%!important;
}
#top_header .grid_6 {
    width: 30%!important;
}
.catch_box {
    left: 43%;
    transform: translateX(-7%);
    bottom: 63%;
    width: 460px;
}
.tel_box, .mail_box {
  max-width: 350px; 
}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
header #top_link .links_bt {
    width: 39%!important;
}
header #top_link .links_bt {
    top: 72% !important;
}
.catch_box {
    left: 42%;
    transform: translateX(-30%);
    bottom: 64%;
    width: 300px;
}
#contents h3 {
    padding: 10px 3px 10px 10px;
}
#cms_5-c .box_txt1::before {
    left: 0px;
}

.tel_box a, .mail_box a {
    padding: 10px 0;
}
}
/*********  IE  *****************/
@media all and (-ms-high-contrast: none){
#contents h3 span {
    padding: 0 0 0 10px !important;
}
.red::before {
    top: 79px !important;
}

}