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

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #ffcc66} /* メインカラー */
.bg_color2{background-color: #ed6d46} /* サブカラー */
.bg_color3{background-color: #c39c89} /* アクセントカラー1 */
.bg_color4{background-color: #F9F9EA} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #ffcc66}
.border_color2{border-color: #ed6d46}
.border_color3{border-color: #c39c89}
.border_color4{border-color: #F9F9EA}

/* 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: #ffcc66} /* メインカラー */
.hvr_txt_color2:hover{color: #ed6d46} /* サブカラー */
.hvr_txt_color3:hover{color: #c39c89} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #F9F9EA} /* アクセントカラー2 */

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


/* border-color ※!important */
.hvr_border_color1:hover{border-color: #ffcc66}
.hvr_border_color2:hover{border-color: #ed6d46}
.hvr_border_color3:hover{border-color: #c39c89}
.hvr_border_color4:hover{border-color: #F9F9EA}

/*h2, h3, h4, #cms_5-c .box_txt1::before {
    font-family: 'Hina Mincho', serif!important;
}*/
.linkStyle {
    color: #c39c89;
}
.h_contents .mail_bt a {
    background-color: #c39c89;
}
.hvr_bg_color3:hover {
    background-color: #ed6d46;
}

.catch {
    width: 60%;
    right: 62px;
    bottom: 50px;
}

.aisatu_title {
    position: relative;
    z-index: 1;
}
.aisatu_title:before {
    position: absolute;
    content: "";
    border-bottom: 17px solid #ffcc66;
    width: 110%;
    background-position: center;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    top: 15px;
    z-index: -1;
}
.catch_txt h2 {
    color: #222;
}
#top_contents1 {
    background-image: url(./dup/img/kami_haikei.jpg);
    position: relative;
}
.catch_txt {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 3%;
    /* border: 3px solid #c39c89; */
    box-shadow: 0px 5px 10px #ccc;
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 239, 39, 0.1);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

.fadein1 {
  opacity : 0;
  transform : translate(100px, 0px);
  transition : all 1s;
}
 
.fadein1.active{
  opacity : 1;
  transform : translate(0, 0);
}
.fadein2 {
  opacity : 0;
  transform : translate(-100px, 0px);
  transition : all 1s;
}
 
.fadein2.active{
  opacity : 1;
  transform : translate(0, 0);
}

.hito {
    width: 120px;
    /*left: 50%;
    transform: translateX(-50%);*/
    top: 55px;
}
.hito {
  opacity : 0;
  left: 50%;
  transform : translate(-50%, 30px);
  transition : all 1s;
}
 
.hito.active{
  opacity : 1;
  left: 50%;
  transform : translate(-50%, 0);
}
.kangei {
    background-image: url(./Dup/img/kangei.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 50%;
}

.miryoku {
    background-image: url(./Dup/img/miryoku.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 50%;
}

.top_cms_title .before, .top_info_title .before {
    color: #ffcc66;
}
#top_contact_box .txt_wrap {
    color: #ffffff;
}
#top_contact_box .top .txt_box::before {
    background: #ffffff;
}
#cms_2-b .cate_title, #cms_6-a .cate_title {
    color: #ffffff;
}
#page9 .box_wrap a {
    color: #333;
}
.mail_bt a {
    border-radius: 0;
    padding: 10px 28px;
}
.tel_bt, .con_bt {
    border-radius: 0;
}
#logo img {
    width: 90% !important;
}
#footer::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 204, 102, 0.7);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}
#page_title .title_box {
    background-color: #f9f9ea;
    box-shadow: 0px 2px 2px #cccccc;
}
/* =============================================
　　タブレット
============================================= */
@media screen and (max-width: 768px){
.catch {
    width: 530px;
    right: 5px;
    bottom: 32px;
}
.hito {
    width: 80px;
    top: 23px;
}
#logo h1.logo {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    max-width: 100px;
}
#tel_txt .grid_3 {
    width: 26%!important;
}
#tel_txt .grid_9 {
    width: 74%;
}
#logo img {
    width: 80% !important;
}
}

/* =============================================
　　スマホ
============================================= */
@media screen and (max-width: 667px){
.catch {
    width: 300px;
    right: 5px;
    bottom: 9px;
}
#tel_txt .grid_3 {
    width: 100%!important;
}
#tel_txt .grid_9 {
    width: 100%;
}
.hito {
    width: 60px;
    top: -8px;
}
#logo img {
    width: 70% !important;
}
#contact_wrap .tel_box .font_10up_sp {
    font-size: -webkit-calc(1rem + 9px);
    font-size: calc(1rem + 9px);
    padding: 10px 0;
}
.kangei {
    background-size: 90%;
}

.miryoku {
    background-size: 90%;
}
}
/* =============================================
　　IE
============================================= */
@media all and (-ms-high-contrast: none){
/*@media all and (-ms-high-contrast:none)*/
#main_img {
    max-height: 100vh !important;
    overflow: hidden;
}
/*@media all and (-ms-high-contrast:none)*/
/*#cms_2-a .cate .cate_title {
    padding-top: 10px !important;
}*/
/*@media all and (-ms-high-contrast:none)*/
/*#cms_2-b .cate .cate_title {
    padding-top: 10px !important;
}*/
/*@media all and (-ms-high-contrast:none)*/
/*#cms_6-a .cate .cate_title {
    padding-top: 10px !important;
}*/
#cms_5-c .box_txt1::before {
    content: "A.";
    font-weight: bold;
    position: absolute;
    color: rgba(0, 0, 0, 0.3);
    top: 3px !important;
    left: 13px;
    font-size: -webkit-calc(1rem + 8px);
    font-size: calc(1rem + 8px);
}
.overlay .menu-box .menu_list li a {
    display: block;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0px !important;
}

}