/*　全体　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#wrap{
    position: relative;
}

/* スマホ */
@media screen and (max-width: 667px){
    #header h1 img{width: 130px !important;}
}

/*　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.under_box.bg_color3{
    background-color:color-mix(in srgb, var(--color3) 50%, var(--color1));
}


/*　問い合わせボタン　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.sp_contact_bt{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
}

/* タブレット */
@media screen and (max-width: 768px){
    .sp_contact_bt{
        top: auto;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    .sp_contact_bt{
        bottom: 0;
    }
}


/*　メインイメージ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.top_box{
    position: fixed;
}
.main_box{
    margin-top: 18vw;
    position: relative;
    z-index: 1;
    background: linear-gradient(0deg, var(--color1) 80% , transparent 95%);
}

#main_img{}


.catch {
    width: 55vw;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.catch img {
    display: block;
    width: 100%;
    height: auto;
}


.catch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0; 
  width: 100%; 
  height: 100%;
  z-index: 1;
  background-position: -150% 0; 
  
  /*2. マスク画像（HTMLの画像と同じパスにする）*/
  -webkit-mask-image: url('/Files/img/catch.png');
  mask-image: url('/Files/img/catch.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* アニメーション：背景の位置を動かす */

.catch.move::before {
    animation: shine-img 0.8s ease-in-out forwards;
  
  /* animation: shine-img 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; */
}



@keyframes shine-img {

  0% {
    background-position: -150% 0;
     background: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0) 100%
  )no-repeat;
  opacity: 1;
  }

  30% {
      background-position: 0% 0;
      background: rgba(255, 255, 255, 0.7) ;
  opacity: 1;

  }

  60% {
    background-position: 250% 0;
         background: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.5) 100%
  )no-repeat;
     opacity: 0;
  }
  70% {
    background-position: -150% 0;
    background: rgba(255, 255, 255, .7) ;
  opacity: 1;
  }

  85% {
      background-position: 0% 0;
    background: rgba(255, 255, 255, 9) ;
    opacity: 1;

  }

  100% {
    background-position: 250% 0;
    background: rgba(255, 255, 255, 9) ;
     opacity: 0;
  }
} /* */






/* タブレット */
@media screen and (max-width: 768px){
    .catch{
        width: 70vw;
    }
    .main_box{
        margin-top: 40vw;
        background: linear-gradient(0deg, var(--color1) calc(100% - 16vw) , transparent calc(100% - 5vw));
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .main_box{
        margin-top: calc(50vw + 90px);
        background: linear-gradient(0deg, var(--color1) calc(100% - 7vw), transparent calc(100% - 1vw));
    }
    
    .catch {width: 109vw;}
}



/*　TOPページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#contents2 .con2_img{
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
}

.banner_box{
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.banner_box a.bg{
    background-color: var(--color1);
}
.banner_box a.bg:hover{
    color: #fff;
    background-color: color-mix(in srgb, var(--color1) 60%, #fff);
}
.banner_box a.bg:hover .sub_text{
    color: #fff;
    transition: all .5s;
}

#top_cms{
    clip-path: polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
    padding: 150px 0 40px;
}

.box_title1{}


/*　代表挨拶よくある質問　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#cms_2-f .box_title1{
    color: color-mix(in srgb, var(--color2) 70%, #ffffff);
    font-size: calc(1rem + 6px);
    padding-left: 40px;
}
#cms_2-f .box_title1::after{
    width: 25px;
    top: 20px;
}

/* スマホ */
@media screen and (max-width: 667px){
    #cms_2-f .box_title1{
        font-size: calc(1rem + 4px);
    }
    #cms_2-f .box_title1::after{
        top: 17px;
    }
}

/*　流れ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.flow_type3 .cate{counter-reset: box;}
.flow_type3 .cate_box{
    counter-increment: box;
    padding-top: 90px;
}
/* .flow_type3 .box_item{padding-top: 60px;} */
.flow_type3 .box_title1{
    z-index: 0;
    font-size: calc(1rem + 6px);
}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
	content: "0"counter(box);
	font-size: 86px;
	color: color-mix(in srgb, var(--color3) 40%, transparent);
	left: 0;
	top: -70px;
	z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: color-mix(in srgb, var(--color3) 40%, transparent);
}

/* タブレット */
@media screen and (max-width: 768px){
    .flow_type3 .cate_box{padding-top: 40px;}
}

/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 36px;
}
}

/*　ビフォーアフター　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.BA_type1 .box_item, .BA_type1 .box_img1, .BA_type1 .box_img2 {position: relative;}
.BA_type1 .box_item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50.3%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 0 17px 40px;
    border-color: transparent transparent transparent var(--color3);
}
.BA_type1 .box_img1 {margin-right: 40px;}
.BA_type1 .box_img2 {margin-left: 40px;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {
    position: absolute;
    height: 33px;
    width: 87px;
    background-color: #fff;
    color: #434343;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
        top: 0;
    left: 0;
}
.BA_type1 .box_img1::after {content: "before";}
.BA_type1 .box_img2::after {content: "after";}

@media screen and (max-width: 667px){
.BA_type1 .box_img1 {margin-right: 5%;margin-bottom: 50px;}
.BA_type1 .box_img2 {margin-left: 5%;}
.BA_type1 .box_img1::after, .BA_type1 .box_img2::after {height: 30px;font-size: 15px;}
.BA_type1 .box_item::after {transform: translate(-50%,-60%) rotate( 90deg);border-width: 20px 0 20px 23px;}
}