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

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


/* border-color ※!important */
.border_color1{border-color: #888888}
.border_color2{border-color: #f2f2f2}
.border_color3{border-color: #4d4d4d}
.border_color4{border-color: #dddddd}


/* 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: #101010} /* メインカラー */
.hvr_txt_color2:hover{color: #f2f2f2} /* サブカラー */
.hvr_txt_color3:hover{color: #4d4d4d} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #dddddd} /* アクセントカラー2 */

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


/* border-color ※!important */
.hvr_border_color1:hover{border-color: #101010}
.hvr_border_color2:hover{border-color: #f2f2f2}
.hvr_border_color3:hover{border-color: #4d4d4d}
.hvr_border_color4:hover{border-color: #dddddd}

.yoyaku:hover, .yoyaku_contact:hover {
    opacity: 0.7;
}
.cms_6-a .grid_4 {
    width: 80%!important;
}
.cms_6-a .cate_wrap {
    display: block;
}
#cms_5-b .cate_box .open_bt .box_title1::before {
    color: rgb(255, 255, 255) !important;
}
header .scroll_d span {
    display: none;
}
#page_title p, #contents4 .txt_color2, .cms_title .txt_color2 {
    color: #c19238;
}
.catch {
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}
#contents1 .con_box, #contents2 h2, #contents3 h2, #top_info .con_box, #under_page .under_box {
    border: 6px solid #c21500;
    border-image: linear-gradient(to right, #c19238 0%, #eec975 50%, #c19238 100%);
    border-image-slice: 1;
}
#contents1 {
    background-image: url("./Dup/img/con1_back.jpg");
    background-size: 100% auto;
    background-position: top left;
    background-repeat: no-repeat;
}
#contents1 .con_title {
    padding-right: 10px;
    padding-left: 10px;
}
#contents2 h2, #contents3 h2 {
    padding-top: 20px;
    padding-bottom: 20px;
}

#page_title {
    background-image: url("./Dup/img/cms_logo.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
}
.bg_color3, #sp_nav .bg_color1 {
    background-color: #141414;
background-image: url("https://www.transparenttextures.com/patterns/real-carbon-fibre.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
.con_box::before, .cms_title::before, #contents4 a .con_txt::before, #page-top .scroll_u span::before {
    background-color: #c3943a;
}
#cms_6-a .border_color3 {
    border-color: #c19238;
}
#cms_2-c .box_txt1:first-letter {
    color: #c19238;
}
#under_page .under_box {
    position: relative;
}
#under_page .under_box:before {
    position: absolute;
    content: "";
    background-image: url(./Dup/img/bisu1.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 95%;
    height: 30px;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}
#under_page .under_box:after {
    position: absolute;
    content: "";
    background-image: url("./Dup/img/bisu2.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 95%;
    height: 30px;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

#anime{
   overflow:hidden;
}
.fade-in{ 

　opacity:0;
  animation-name:slide;
  animation-duration:15s; 
  animation-delay: 0.8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes slide {
0% {
 opacity: 0;
 transform: translateX(-100px);
}
  50%{
    opacity: 1;
    transform: translateX(0);
  }
 100% {
 opacity:0;
 transform: translateX(100px);
 } 
}


/*===========
inview
===========*/

.fadeIn_right {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
/*===========
inview
===========*/

.fadeIn_left {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


@media screen and (max-width: 1191px) {
.height100vh {
    height: 100%;
}
}

/***********タブレット*******************/
@media screen and (max-width: 768px) {
    #pc_nav {
    left: 40px;
    bottom: 530px;
    z-index: 2;
}
.cms_6-a .grid_4 {
    width: 95%!important;
    margin: 0 auto;
}
.yoyaku, .yoyaku_contact {
    width: 230px;
}
.con_title {
    font-size: -webkit-calc(1rem + 12px);
    font-size: calc(1rem + 12px);
}
#contents2 h2, #contents3 h2 {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
}
#contents4 .bg_black {
    background-color: #1f1f1f;
}
}

/***********スマホ*******************/
@media screen and (max-width: 667px) {
    #header .width_200-max_sp {
    max-width: 60px;
}
.font_6up_sp {
    font-size: -webkit-calc(1rem + 4px);
    font-size: calc(1rem + 4px);
}
#top_info .width_90per_tb {
    width: 95%!important;
}
.all {
    display: none;
}
#cms_2-c .cate_title {
    font-size: -webkit-calc(1rem + 3px);
    font-size: calc(1rem + 3px);
}
#contents2 h2, #contents3 h2 {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
}
}