.font_serif {
    font-family: 'Noto Sans JP', sans-serif !important;
} 
/* color */
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #f5deb3} /* メインカラー */
.txt_color2{color: #f2f2f2} /* サブカラー */
.txt_color3{color: #8e775d} /* アクセントカラー1 */
.txt_color4{color: #e6cd8c} /* アクセントカラー2 */

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


/* border-color ※!important */
.border_color1{border-color: #f5deb3}
.border_color2{border-color: #f2f2f2}
.border_color3{border-color: #8e775d}
.border_color4{border-color: #e6cd8c}


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

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


/* border-color ※!important */
.hvr_border_color1:hover{border-color: #f5deb3}
.hvr_border_color2:hover{border-color: #f2f2f2}
.hvr_border_color3:hover{border-color: #8e775d}
.hvr_border_color4:hover{border-color: #e6cd8c}
.bg_color1 {
    background-color: #f5deb3;
background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
.linkStyle {
    color: #e6cd8c;
}
#sp_nav .txt_color_nomal {
    color: #121212!important;
}
.cms_3-b .cate_title, #cms_3-b .cate_title {
    color: #121212;
    text-shadow: none;
}
.tel_bt {
    background-color: rgba(55,55,55,0.5);
}
.tel_bt:hover {
    background-color: rgba(55,55,55,0);
}
.cms_3-d .box_title, #cms_3-d .box_title {
    color: #222222;
    text-shadow: none;
}
.cms_3-d .box_txt1, #cms_3-d .box_txt1 {
    text-shadow: none;
    color: #be0606;
}
.cms_3-d .box_txt2, #cms_3-d .box_txt2 {
    text-shadow: none;
    color: #222222;
}
#cms_3-d .box_txt1 {
    text-align: right;
}
#contents2 .con_txt, #contents3 .con_txt {
    position: relative;
    z-index: 2;
}
.catch {
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.catch {
  animation: poyoyon3 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
  animation-delay: 3s;
}

@keyframes poyoyon3{
  0% {
    transform: translateX(140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}

.con_box::before, #contents4 a .con_txt::before, .cms_title::before {
    background-color: #cf3030;
}
.ushi {
    z-index: 1;
    bottom: 0;
    opacity: 0.8;
    width: 18%;
}
.ushi{
     opacity: 0;
}
.ushi.fadetrans{
	animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
@keyframes poyoyon{
  0% {
    transform: translateX(-140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(-30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 0.8;
  }
}
.buta {
    bottom: 0;
    right: 0;
    opacity: 0.8;
    width: 18%;
}
.buta{
     opacity: 0;
}
.buta.fadetrans{
	animation: poyoyon2 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
@keyframes poyoyon2{
  0% {
    transform: translateX(140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 0.8;
  }
}
#contents1 .con_title:first-letter, #contents2 .con_title:first-letter, #contents3 .con_title:first-letter {
    color: #cf3030;
    font-size: -webkit-calc(1rem + 30px);
    font-size: calc(1rem + 30px);
    font-weight: bold;
}
.set {
    top: 8% !important;
    right: 0;
    width: 50%;
    /*z-index: -1;*/
}
.set{
     opacity: 0;
}
.set.fadetrans{
	animation: poyoyon5 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
@keyframes poyoyon5{
  0% {
    transform: translateY(-140px);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
  20%,100% {
    opacity: 1;
  }
}
#contents1 figure {
    z-index: -1;
}
.face {
    width: 250px;
    left: 50%;
    transform: translateX(-50%);
    top: -90px;
}
#page_title .opacity02 {
    opacity: 1;
}
@media screen and (max-width: 1100px){
#pc_nav {
    bottom: 191px;
}
}
#under_page .hvr_txt_white:hover {
    color: #222;
}
/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
.height100vh {
    height: 52vh;
}
#pc_nav {
    left: 40px;
    bottom: 615px;
    z-index: 2;
}
.face {
    width: 200px;
}
.set {
    display: none;
}
.ushi, .buta {
    width: 40%;
}
.catch {
    top: 48%;
    left: 42%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 55%;
}
header .scroll_d {
    display: none;
}
#tel_txt h3 {
    font-size: 13px;
}
}
/*ここからスマホ用（667px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
.height100vh {
    height: 40vh;
}
h1 .width_200-max_sp {
    width: 100%;
    max-width: 90px;
}
#contents1 .con_title:first-letter, #contents2 .con_title:first-letter, #contents3 .con_title:first-letter {
    font-size: -webkit-calc(1rem + 20px);
    font-size: calc(1rem + 20px);
}
.face {
    width: 100px;
    top: -30px;
}
.catch {
    top: 62%;
    left: 9%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 81%;
}
.tel_box a {
    padding: 10px 0;
}
#contents1 .font_6up_sp {
    font-size: -webkit-calc(1rem + 7px);
    font-size: calc(1rem + 7px);
}
}
@media all and (-ms-high-contrast:none) {
#cms_3-b .cate_title {
    padding-top: 10px !important;
}
/*@media all and (-ms-high-contrast:none)*/
#cms_3-d .cate .cate_title {
    padding-top: 17px !important;
    padding-bottom: 20px !important;
}
/*@media all and (-ms-high-contrast:none)*/
#cms_4-c .cate_title {
    padding-top: 10px !important;
}
/*@media all and (-ms-high-contrast:none)*/
.page9 p a {
    padding-top: 0px !important;
    padding-bottom: 3px !important;
}
/*@media all and (-ms-high-contrast:none)*/
.tel_bt {
    padding-top: 10px !important;
}


}