﻿/* color */
body,.txt_color_nomal{color: #000;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #e06c6e;} /* メインカラー */
.txt_color2{color: #7CC6D0;} /* サブカラー */
.txt_color3{color: #f5ac52;} /* アクセントカラー1 */
.txt_color4{color: #f6f5ee;} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white;} /* 白背景 */
.bg_black{background-color: black;} /* 黒背景 */
.bg_color1{background-color: #e06c6e;} /* メインカラー */
.bg_color2{background-color: #7CC6D0;} /* サブカラー */
.bg_color3{background-color: #f5ac52;} /* アクセントカラー1 */
.bg_color4{background-color: #f6f5ee;} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important;}


/* border-color ※!important */
.border_color1{border-color: #e06c6e;}
.border_color2{border-color: #7CC6D0;}
.border_color3{border-color: #f5ac52;}
.border_color4{border-color: #f6f5ee;}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #000;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #e06c6e;} /* メインカラー */
.hvr_txt_color2:hover{color: #7CC6D0;} /* サブカラー */
.hvr_txt_color3:hover{color: #f5ac52;} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f6f5ee;} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #e06c6e;} /* メインカラー */
.hvr_bg_color2:hover{background-color: #7CC6D0;} /* サブカラー */
.hvr_bg_color3:hover{background-color: #f5ac52;} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f6f5ee;} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #e06c6e;}
.hvr_border_color2:hover{border-color: #7CC6D0;}
.hvr_border_color3:hover{border-color: #f5ac52;}
.hvr_border_color4:hover{border-color: #f6f5ee;}

h2, h3, h4, .catch, #page_title .font_45 {
    font-family: 'Kiwi Maru', serif!important;
}
.t_cms_txt2, .t_cms_txt5, .t_cms_txt8 {
    font-family: 'Qahiri', sans-serif !important;
    font-size: 50px;
    animation: yureru-s 2s infinite;
}
.t_cms_txt2 span, .t_cms_txt5 span, .t_cms_txt8 span {
    position: relative;
    padding: 0 15px;
    color: #fff;
    border-radius: 10px;
    background: #7cc6d0;
}
.t_cms_txt2 span:after, .t_cms_txt5 span:after, .t_cms_txt8 span:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #7cc6d0 transparent transparent transparent;
}

@keyframes yureru-s {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}
.catch {
    font-size: -webkit-calc(1rem + 25px);
    font-size: calc(1rem + 25px);
}
/*.top_nav li {*/
/*    background-color: rgba(50,50,50,0.1);*/
/*}*/
.img-container:before {
    background: #e06c6e;
}
.t_cms_img2 .img-container:before {
    background: #aef3ad;
}
.cls-3 {
    fill: #7cc6d0;
}
.cms_2-a .box_img1 {
    width: 45%!important;
    margin: 0 auto;
}
.cms_2-a .cate_txt1 {
    width: 45%!important;
    margin: 0 auto;
}
.top_nav li a span {
    text-shadow: 1px 2px 3px #808080;
}
.flog1 {
    top: 3%;
    left: 15px;
    opacity: 0.6;
    animation: img_box_9955 3s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}
 
@keyframes img_box_9955 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
#contents .box .txt_wrap {
    width: 45%;
    position: relative;
}
.flog2 {
    right: -146px;
    top: 162px;
    opacity: 0.8;
    width: 300px;
    animation: img_box_9955 4.5s linear infinite;
}
@keyframes img_box_9955 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-25px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
.flog3 {
    left: 5px;
    bottom: -57px;
    opacity: 0.3;
    animation: mocchiri 3s infinite;
}

@keyframes mocchiri {
    0% {
        transform: scale(1, 0.8);
    }
    20% {
        transform: scale(0.8, 1.1);
    }
    95% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 0.8);
    }
}
.t_cms_txt3:first-letter, .t_cms_txt6:first-letter, .t_cms_txt9:first-letter {
    color: #e06c6e;
    font-size: 30px;
}
footer {
    z-index: 0;
    height: 480px;
    background-color: #e06c6e;
}
.flog4 {
    top: 26%;
    width: 300px;
    transform: rotate(
20deg
);
    right: 6px;
}
.flog5 {
    width: 300px;
    left: -37px;
    bottom: -14%;
    transform: rotate(
-15deg
);
}
#line_CONTACT .bg_color1 {
    background-color: #39ae36;
}
#line_CONTACT .bg_color1:hover {
    opacity: 0.6;
}
.fab {
    margin-right: 20px;
}
.fa-line:before {
    content: "\f3c0";
    font-size: 25px;
}
.all_page {
    background-color: #7cc6d0;
}
.cms_2-a .box_img1 {
        box-shadow: 0 2px 4px rgb(0,0,0,0.15); 
}
.cate_list a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#page_title .page_title_box .font_45 {
  text-shadow: 2px 2px 0 #fff,
             -2px 2px 0 #fff,
             2px -2px 0 #fff,
             -2px -2px 0 #fff;
}
#page7 .txt_color3 {
    color: #121212;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    .cms_2-a .box_img1 {
    width: 75%!important;
    margin: 10px auto 0;
}
.cms_2-a .cate_txt1 {
    width: 90%!important;
    margin: 20px auto 0;
}
.main_img_wrap .catch {
    bottom: 51%;
    left: 15px;
}
.main_wrap {
    padding-top: 15px;
    margin-top: 48.5vh;
}
#contents .box .txt_wrap {
    width: 90%;
    position: relative;
}
#contents .box figure {
    width: 70%;
    position: relative;
    z-index: 1;
    margin-top: 38px;
    margin-bottom: 30px;
}
#contents .box figure:after {
    width: 68%;
    border: 115px solid;
}
.flog4 {
    top: 32%;
    width: 250px;
    right: 6px;
}
.flog2 {
    right: -91px;
    top: 471px;
    width: 265px;
}
.flog5 {
    width: 250px;
    left: -37px;
}
.flog3 {
    z-index: 2;
}
}
/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
    .cms_2-a .box_img1 {
    width: 75%!important;
    margin: 0 auto;
}
.cms_2-a .cate_txt1 {
    width: 90%!important;
    margin: 10px auto;
}
.cms_2-a .swiper-button-prev {
    left: -10px;
}
.cms_2-a .swiper-button-next {
    right: -10px;
}
.catch {
    font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
}
.catch .txt_white {
    color: #e06c6e;
}
.flog4 {
    top: 34%;
    width: 150px;
    right: 6px;
}
.flog5 {
    display: none;
}
.flog3 {
    width: 100px;
}
.t_cms_txt2, .t_cms_txt5, .t_cms_txt8 {
    font-size: 35px;
}
.cms_2-a .cate_title {
    font-size: -webkit-calc(1rem +2px);
    font-size: calc(1rem + 2px);
}
.cms_2-a .box_img1 {
    width: 90%!important;
    margin: 0 auto;
}
.cms_2-a .width_90per {
    width: 100%!important;
}
#line_CONTACT .width_300, #tel_CONTACT .width_300 {
    width: 260px;
}
#line_CONTACT .font_16_sp, #tel_CONTACT .font_16_sp {
    font-size: 15px;
}

#cms_2-d .cate .cate_title {
    padding-top: 8px !important;
}
#page_title .page_title_box .font_45 {
  text-shadow: none;
}
.other_link .box_item .posi_center {
    width: 300px;
}
#cms_2-a .cate_title {
    padding: 10px 0;
}
}

@media all and (-ms-high-contrast:none) {
#cms_2-a .cate .cate_title {
    padding-top: 8px !important;
}

#cms_2-b .cate .cate_title {
    padding-top: 8px !important;
}

#cms_2-d .cate .cate_title {
    padding-top: 8px !important;
}
.abc {
    margin-top: 100px;
}

}