@charset "UTF-8";
body{
	background: #fafafa;
}

.top_bg{
	background:url(../../images/index/pc.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	height: 32vh;
}
.main_visual{
	width: 100%;
	height: auto;
	transform: scale(1.1);
	filter: grayscale(100%);
}
.main_content{
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0 16px;
}
.top_area{
	height: auto;
	position:relative;
}
.top_cnt{
	width: 100%;
	margin: 20px 0 30px;
}
.top_cnt02{
	width: 100%;
	padding: 5% 5%;
	display: none;
}
#keyvisual {
	position: absolute;
	width: 100%;
	height: 32vh;
	display: flex;
	align-items: center;
	
}
#keyvisual h1 {
	color: #333;
	font-weight: 600;
	font-size: 1.2em;
	padding: 5px 15px;
	background:rgba(255,255,255,.9);
	letter-spacing: .08em !important;
	display: inline-block;
	margin: 0 auto;
	position: relative;
	z-index: 0;
}

#keyvisual h1::before {
    border-bottom: 4px solid #b22222;
    bottom: -10px;
    content: "";
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
#keyvisual h1::after {
    border-bottom: 4px solid #efefef;
    bottom: -10px;
    content: "";
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    left: 50%;
    width: 50%;
}
.h1_color{
	color: #b22222 !important;
}

.slideInRight {
  animation-name: slideInRight02;
  animation-duration: .5s;
	animation-timing-function:ease-in-out;
}
@keyframes slideInRight02 {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
	
  to {
    opacity: 1;
    transform: translateX(0);
  }
	
}
.slideInRight {
  animation-name: slideInRight02;
  animation-duration: .5s;
	animation-timing-function:ease-in-out;
}

.strong_h1 {
	font-size: 1.2em;
	font-weight: 600;
	color: #000;
	display: inline-block;
	position: relative;
	overflow: hidden;
	margin-bottom: 10px;
}
.strong_h1 span{
/*	background: linear-gradient(transparent 70%, #fff100 70%);*/
}
.top_txt{
	max-width: 100%;
	line-height: 1.5;
}
.strong_area{
	margin-bottom: 30px;
	box-shadow: 0 5px 30px -7px rgba(25,25,25,.7);
}
.strong_area02{
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 30px;
	box-shadow: 0 5px 30px -7px rgba(25,25,25,.7);
}

.strong_cnt{
	position: relative;
	padding: 3% 5% 2%;
	width: 100%;
	background: #fff;
	z-index: -2;
	padding-bottom: 20px;
	text-align: center;
}
.strong_cnt02{
	width: 100%;
}
.top_cnt_img{
	text-align: center;
}
.top_cnt_img img{
	width: 20%;
	text-align: center;
}
.strong_point{
	display: inline-block;
	color: #b22222;
	font-weight: 600;
	display: inline-block;
	position: relative;
	padding-bottom: 15px;
	margin: 20px 0 10px;
	overflow: hidden;
	font-size: 1em !important;
}
.strong_point::before {
    content: "";
    display: block;
    border-bottom: 3px solid #b22222;
    position: absolute;
    width: 50%;
    bottom: 6px;
	left: -5px;
}
.strong_point::after {
    content: "";
    display: block;
    border-bottom: 3px solid #b22222;
    position: absolute;
    width: 50%;
    bottom: 6px;
	right: -5px;
}
.strong_point .arrow {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 3px solid #b22222;
    border-right: 3px solid #b22222;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
    left: 50%;
    margin-left: -5px;
    bottom: 2px;
}
.strong_h2{
	font-size: 1.4em;
	font-weight: 600;
	margin-bottom: 20px;
	letter-spacing: 0 !important;
	text-align: center;
}
.strong_txt{
	font-size: 1.1em;
	line-height: 1.5;
}
.strong_num{
	position: absolute;
	top: 7px;
    right: -13px;
	width: 30%;
	z-index: -1;
}
.another_area{
	padding: 0 5%;
}
.another_txt{
	text-align: center;
	font-size: 1em;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 80px;
	text-align: justify;
	border: 2px solid #333;
	padding: 5%;
	letter-spacing: .08em;
	line-height: 1.5;
}

/*--------------------------------------
フェードイン
--------------------------------------*/

/*右から*/
.fadein {
    opacity : 0;
    transform : translate(50px, 0);
    transition : all 800ms;
    }

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

/*左から*/
.fadein2 {
    opacity : 0;
    transform : translate(-50px, 0);
    transition : all 600ms;
    }
.fadein2.scrollin2 {
    opacity : 1;
    transform : translate(0, 0);
    }

/*したから*/
.fadein3 {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 600ms;
    }
.fadein3.scrollin3 {
    opacity : 1;
    transform : translate(0, 0);
    }


@media screen and (min-width:768px) and ( max-width:1280px) {
	.strong_h1 {

    font-size:  3.3vw;

}
	.strong_h2{
	font-size: 2vw;
}
	.top_txt{
	line-height: 1.5;
	font-size: 1.2vw;
}
	.strong_txt{
	font-size: 1.2vw;
}
}