@charset "UTF-8";
/* 汎用CSS*/

/* clearfix */
.clearfix:after{
content: "."; 
display: block; 
height: 0; 
font-size:0;    
clear: both; 
visibility:hidden;
}
.clearfix{
display: inline-block;
} 
/* Hides from IE Mac */
* html .clearfix{
height: 1%;
}
.clearfix{
display:block;
}
/* clearfix */

.clear{ clear:both; }

/*微調整用*/

.mar-0{ margin:0px !important; }

.mar-t0{ margin-top:0px !important; }
.mar-t05{ margin-top:5px !important; }
.mar-t10{ margin-top:10px !important; }
.mar-t15{ margin-top:15px !important; }
.mar-t20{ margin-top:20px !important; }
.mar-t30{ margin-top:30px !important; }
.mar-t40{ margin-top:40px !important; }

.mar-l0{ margin-left:0px !important; }
.mar-l05{ margin-left:5px !important; }
.mar-l10{ margin-left:10px !important; }
.mar-l15{ margin-left:15px !important; }
.mar-l20{ margin-left:20px !important; }
.mar-l30{ margin-left:30px !important; }
.mar-l40{ margin-left:40px !important; }

.mar-b0{ margin-bottom:0px !important; }
.mar-b05{ margin-bottom:5px !important; }
.mar-b10{ margin-bottom:10px !important; }
.mar-b15{ margin-bottom:15px !important; }
.mar-b20{ margin-bottom:20px !important; }
.mar-b30{ margin-bottom:30px !important; }
.mar-b40{ margin-bottom:40px !important; }

.mar-r0{ margin-right:0px !important; }
.mar-r05{ margin-right:5px !important; }
.mar-r10{ margin-right:10px !important; }
.mar-r15{ margin-right:15px !important; }
.mar-r20{ margin-right:20px !important; }
.mar-r30{ margin-right:30px !important; }
.mar-r40{ margin-right:40px !important; }

.txt_c {text-align: center;}
.txt_l {text-align: left;}
.txt_r {text-align: right;}

.al_l {float: left;}
.al_r {float: right;}

.con_c{margin: 0 auto;}
.clear{clear: both;}

/*微調整用*/


/*display*/
.display_sp{ display:none !important; }/*sp非表示*/
.display_pc{ display:flex !important; }/*pc表示*/
@media screen and (max-width :767px){
	.display_sp { display:flex !important; }/*sp表示*/
	.display_pc { display:none !important; }/*pc非表示*/
	.btn_r.display_sp { display:inline-flex !important; }/*sp表示*/

}
/*display*/

 .animate__animated {
   opacity: 0;
 }
 .area_01 {
   height: 200px;
   width: 100%;
   background-color: #ccc;
 }
 .parallax {
   height: 200px;
   background-image: url('../images/sample.jpg');
   background-attachment: fixed;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }

.btn_r{
	font-size: 1.6rem;
	align-items: center;
	justify-content: center;
	display: inline-flex;
	width: 280px;
	height: 60px;
	background-color: #FCEAEA;
	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	transition: all  1s ease;
	font-family: "Montserrat","Zen Kaku Gothic New", sans-serif;
}
.btn_r::before{
	content: '';
	display: block;
	border-bottom: 1px solid #CF1126;
	width: 38px;
	position: absolute;
	right: 0;
	top:50%;
	transition: all  0.3s ease;
}
.btn_r:hover{
	background-color:#FCCFCF;
	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
}
.btn_r:hover::before{
	width: 50px;
}
.bg_ch01{
	position: relative;
}
.bg_ch01::before{
  display: block;
  content:'';
  width: 85%;
  height: 646px;
  margin-left: calc(50vw - 380px);
  background-image: url("../images/bg_hero.svg");
  background-size: 17px;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top:-100px;
  z-index: -10;
}

.bg_ch02{
	position: relative;
}
.bg_ch02::before{
  display: block;
  content:'';
  width: 85%;
  height: 550px;
  margin-right: calc(50vw - 380px);
  background-image: url("../images/bg_hero.svg");
  background-size: 17px;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top:40px;
  z-index: -10;
}


@media screen and (max-width :767px){
.bg_ch01::before {
  width: 95%;
  height: 100%;
  margin-left:5%;
  position: absolute;
  top: -40px;
  z-index: -10;
}
.bg_ch01{
	text-align: center;
	padding-bottom: 50px;
    margin-bottom: 10px;
}
.bg_ch02::before{
  width:95%;
  height: 95%;
  margin-right: calc(50vw - 380px);
  background-image: url("../images/bg_hero.svg");
}
}