﻿/*--------リンク・フォント--------*/
.linkStyle{color: #333333; text-decoration: underline;}


/*--------全体--------*/
.add_right{margin-left:auto;}
.add_shadow{box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}
.line:hover {color:#00B900;}
.add_tel:hover i{color:#3b5998;}
.add_tel,.add_line{padding-top:0!important;}
.add_contact a,.add_tel a,.add_line a{color: #818181;}
.add_contact li:nth-of-type(1) a{color: #3b5998;}
.add_contact li:nth-of-type(2) a{color: #00B900;}

.add_tel i,.add_line i{
    top: -11px;
    font-size:3em;
}
@media screen and (max-width: 1380px){
.add_tel{margin-left: 0px;}
.add_tel i{margin-right: 10px;}
.add_tel i,.add_line i{font-size:2.2em;}    
.pc_nav li {padding-right: 10px;}
}

.add_contact i{font-size:2.1em;}
#fakeloader .fl {
    max-width: 350px;
}
.underline{
    position: relative;
    display: inline-block;
    z-index: 1;  
}
.underline:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 11px;
  width: 0%;
  height: 9px;
  background: rgba(255, 220, 0, .45);
  z-index: -1;
  transition: all 0.8s;
}
.underline.active:after,#con1 .underline.active:after,#con2 .underline.active:after {
  width: 100%;
}

#main_img .main_ban{
    z-index: +1;
    bottom: -140px;
    left: 0;
    right: 0;
    margin: 0 10%;
    border-radius: 25px;
}
#main_img .main_ban .cate{
    cursor: pointer;
    width: 25%!important;
    transition: .3s;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
#main_img .main_ban .cate:hover{  -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
    background-color: #ffec83;
}
#main_img .main_ban .cate h3{
    padding-top:10px;
    font-size: 1.3em;
    font-weight: bold;
}
#main_img .main_ban .cate figure{
height: 175px!important;
}
#main_img .main_ban a {
    display:block;
    width: 100%;
    color: #333;
}
.topTxt1 .arrow {
    color: #f1c83c;
}
#con1{
    padding-top: 200px;
}
.f_contact_box h4{
    line-height: 1.3;
}
.f_contact_box .f_contact_btn{
    display: none;
}
.menu_btn.stick_trans span:last-child {
    margin-top: -3px;
}
.topTxt1 .arrow {
    transform: translateX(-50%);
}
.baloon_anime {
  animation: bound 3s infinite ease;
}

@keyframes bound {
0% {
    transform: translate(0, 0);
  }
  5% {
    transform: translate(0, 0);
  }
	10% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, -15px);
  }
  25% {
    transform: translate(0, 0);
  }
	30% {
    transform: translate(0, -15px);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.con1_squ{
    height:120px;
    position: relative;
    z-index: +1;
}
.con1_squ span{
   position: absolute;
   animation: bound2 1s infinite;
   left: 0;
	right: 0;
	top:0;
	bottom: -100px;
	margin: auto;
}

.con1_squ span:nth-child(1){ left:-5em; animation: bound2 0.8s 0.0s infinite;}
.con1_squ span:nth-child(2){animation: bound2 0.8s 0.1s infinite;}
.con1_squ span:nth-child(3){	left:5em; animation: bound2 0.8s 0.2s infinite;}


@keyframes bound2 {
0%,100% {top: 0;transform: scale(1);}
	30% {top: -25%;}
	50% {transform: scale(1);}
	90% {top: 0;transform: scale(1.2,0.8);}
}

.step_anime {
  animation: step 2s ease-in-out infinite;
}

@keyframes step {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-6px, -6px) rotate(-2deg);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(6px, -6px) rotate(2deg);
  }
  100% {
    transform: translate(0, 0);
  }
}
#con2{
    background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 15px, rgba(249, 249, 249, 1) 15px, rgba(249, 249, 249, 1) 23px );
}



#con3 .box .img{
    border-radius: 0;
}
#con3 .box .img:after{
    content: "";
    position: absolute;
    display: inline-block;
    z-index: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}
#con3 .box:nth-of-type(1) .img:after{
    background: url(./Dup/img/item_01.png) no-repeat;
    background-size: cover;
}

#con3 .box:nth-of-type(2) .img:after{
    background: url(./Dup/img/item_02.png) no-repeat;
    background-size: cover;
}
#con3 .box:nth-of-type(3) .img:after{
    background: url(./Dup/img/item_03.png) no-repeat;
    background-size: cover;
}
.f_contact_box {
    background-color: rgba(255, 255, 255, .75);
}

.cms_3-a .cate{
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    width: 47%!important;
    border-radius: 15px;
}
.cms_3-a .cate a {
    display:block;
    width: 100%;
    color: #333;
    
}

/*--------下層--------*/
.pagetitle {background-color: #f5f4eb;}
.pagetitle_img {
    background-size: cover;
    background-repeat: no-repeat;
    mix-blend-mode: darken;
}
#cms_3-a .cate .cate_box:last-of-type {
    border-bottom: 1px dotted #0071bc;
}
#cms_6-a figure{
    width: 48%!important;
}

#cms_3-a .sub_cate_title{
    background-color: #0071bc;
    padding: 0px 20px;
    border-radius: 50px;
    color: #fff;
}

/*--------タブレット--------*/
@media screen and (max-width: 768px){
    #fakeloader .fl {
    max-width: 250px;
}
.menu_btn.stick_trans{
    position: absolute!important;
    top: 0px;
}

#main_img .main_ban {
    margin: 0 5%;
}
#main_img .main_ban .cate h3 {
    font-size: 1em;
}
#main_img .main_ban .cate {
    width: 30%!important;
}
#main_img .main_ban .cate figure {
    height: 100px!important;
}
.add_contact{
    position: absolute;
    right: 120px
}

    #con1 {
    background-size: 216%;
    }
    #con3 .box figure,#con3 .box p{
        width: 47%!important;
    }
    #con3 .box{
 margin-bottom: 6em;
}
    .f_contact_box h4 {
    font-size: 6vw;
}
.topTxt1 {
    line-height: 1.3;
}
.menu_btn {
    top: -8px;
}
#sp_nav .sp_nav_inner .l-menu li .font_24{
    font-size: 2.45vw;
}
}

/*--------スマートフォン--------*/
@media screen and (max-width: 667px){
.f_size1_sp{font-size: 6.2vw!important;}
.txt_size1{font-size: 4vw;}
.menu_btn.stick_trans {top: -3px;}
.add_contact i {font-size: 9vw;}
.add_contact i.fa-line {font-size: 11vw;}
.add_contact {right: 80px;}
#main_img{padding-top: 85px;}
#main_img .main_ban {
    margin: 0 3%;
    bottom: -110px;
}

#main_img .main_ban .cate h3 {
    font-size: 3vw;
    line-height: 1.5;
    padding: 10px 5px;
}
#main_img .main_ban .cate p{
    display: none;
}
#main_img .main_ban .cate figure {
    height: 70px!important;
}

    .underline:after {
    bottom: 7px;
    height: 13px;
    }
    #fakeloader .fl {
    max-width: 200px;
}
.header .logo1 {
    padding-left: 0px;
}

#con1 {
    padding-top: 150px;
}
.con1_squ{
    height: 100px;
}
.con1_squ span{
   bottom: -83px;
}
#con3 .box figure,#con3 .box p{
        width: 100%!important;
    }
#con3 .title h3{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    justify-content: center;
    align-items: center;
	flex-direction: row;
}
#con3 .title h3 span{
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    
}
.cms_3-a .cate {
    width: 100%!important;
}
.f_contact_box h4 {
    font-size: 7.5vw;
}
#sp_nav .sp_nav_inner .l-menu li .font_18_sp {
    font-size: 4.5vw;
    line-height: 1.2;
}
.pagetitle h2 {
    font-size: 6.5vw;
}
#cms_3-a .sub_cate_title {
    padding: 10px 20px;
    line-height: 1.5;
    font-size: 4.5vw;
}
}


/*--------------------------------------------
IE
--------------------------------------------*/
@media all and (-ms-high-contrast:none){
#con3 .box .img::after{
    transform:scale(1.05);
}

}