@media print, screen and (min-width : 769px){
.contents.top {
}
.contents.top .bg{
	background-image:url(../image/pic.jpg);
}

.contents.top .hero h1{
	top:160px;
}
.contents.top .corp_wrap{
	width:980px;
	margin:15px auto 0;
	padding-bottom:60px;
		display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction:row;
	-webkit-flex-wrap: wrap;
	flex-wrap:wrap;
	justify-content: space-between;/*-- 両端揃え --*/
	text-align:center;
}
.contents.top .corp_wrap .corp{
	width:400px;
}
.contents.top .corp_wrap .corp h3 .name{
	font-size:20px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	letter-spacing:0.04em;
}
.contents.top .corp_wrap .corp h3 .sama{
	font-size:14px;
	padding-left:0.1em;
}
.contents.top .corp_wrap .corp h3 .interview{
	font-size:14px;
	display:block;
	line-height:200%;
	padding-bottom:13px;
	border-bottom:solid 4px #666666;
	width:200px;
	margin:0 auto;
}
.contents.top .corp_wrap .corp .menu_wrap {
	margin:25px 0 0;
		display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction:row;
	-webkit-flex-wrap: wrap;
	flex-wrap:wrap;
	justify-content: center;/*-- 中央揃え --*/
	justify-content: space-between;/*-- 両端揃え --*/
}
.contents.top .corp_wrap .corp .menu_wrap .menu{
	width:190px;
}
.contents.top .corp_wrap .corp .menu_wrap .menu a{
	display:block;
	color:#666 !important;
}
.contents.top .corp_wrap .corp .menu_wrap .menu .title{
	font-size:18px;
	line-height:200%;
	margin-top:5px;
}
.contents.top .corp_wrap .corp .menu_wrap .menu .copy{
	font-size:13px;
	line-height:160%;
	margin-top:3px;
}
.contents.top .corp_wrap .corp .menu_wrap .menu img{
	width:100%;
}
}
@media screen and (max-width : 768px) {
.contents .btn_wrap{
	position:relative;
	width:100%;
	height:10vw;
	margin:6vw 0 0;
	padding-bottom:8vw;
}
.contents .btn_useful{
	top:4px;
}

.contents .btn_preview{
	top:14px;
}
.contents .hero {
    position: relative;
    height: 103.9vw;
}.contents .hero h1 img.sp {
    padding-top: 22vw;
}
.contents .hero .exp {
    padding-top: 60vw;
}
.contents.top .corp_wrap{
	width:100%;
	padding:9vw 0 0;
	text-align:center;
}
.contents.top .corp_wrap .corp{
	width:80vw;
	margin:0 auto;
	padding-bottom: 9vw;
}
.contents.top .corp_wrap .corp h3 .name{
	font-size:3.8vw;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	letter-spacing:0.04em;
}
.contents.top .corp_wrap .corp h3 .sama{
	font-size:3vw;
	padding-left:0.1em;
}
.contents.top .corp_wrap .corp h3 .interview{
	font-size:3vw;
	display:block;
	line-height:200%;
	padding-bottom:1.8vw;
	border-bottom:solid 1vw #666666;
	width:38vw;
	margin:0 auto;
}
.contents.top .corp_wrap .corp .menu_wrap {
	margin:4vw 0 0;
		display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction:row;
	-webkit-flex-wrap: wrap;
	flex-wrap:wrap;
	justify-content: center;/*-- 中央揃え --*/
	justify-content: space-between;/*-- 両端揃え --*/
}
.contents.top .corp_wrap .corp .menu_wrap .menu{
	width:36vw;
}
.contents.top .corp_wrap .corp .menu_wrap .menu a{
	display:block;
	color:#666 !important;
}
.contents.top .corp_wrap .corp .menu_wrap .menu .title{
	font-size:3vw;
	line-height:220%;
	margin-top:1vw;
}
.contents.top .corp_wrap .corp .menu_wrap .menu .copy{
	font-size:3vw;
	line-height:160%;
	width:44vw;
	margin-left:-4vw;
}
.contents.top .corp_wrap .corp .menu_wrap .menu img{
	width:100%;
}
/* _________________________________________　bg slide */
.bg {
	top: 56px;
	left: 0;
	width: 100%;
    height: 103.9vw !important;
	z-index:1;
	position:absolute;
	overflow:hidden;
}
.bg.fix{
	position:fixed;
}
.bg p {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	transition: all 2s;
	z-index: 1;
}
.bg.bg_l p span{
	margin-top:0;
}
	.bg p.init{
		opacity:1;/*-- あらかじめに表示 --*/
	}
	.bg p.show{
		opacity:1;
		z-index:2;
}
	.bg p.before{
		opacity:1;
		z-index:1;
}
	.bg p:first-child.before{
		z-index:2;
	}
	.bg p.next{
		z-index:3;
	}
.bg.bg_l p.show span,
.bg.bg_sp p.show span{
	margin-top:0px;
  animation-duration: 2s;
  animation-name: pic_l;
}
.bg.bg_r p.show span{
	margin-top:0px;
  animation-duration: 2s;
  animation-name: pic_r;
}
.bg p img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.bg.bg_sp p:nth-child(1) span {	background-image:url(../image/pic_sp_01.jpg)}
.bg.bg_sp p:nth-child(2) span {	background-image:url(../image/pic_sp_02.jpg)}
.bg.bg_sp p:nth-child(3) span {	background-image:url(../image/pic_sp_01.jpg)}
.bg.bg_sp p:nth-child(4) span {	background-image:url(../image/pic_sp_02.jpg)}

.bg p span {
	position:absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background-size: cover;
	background-position: center 0;
}

	.bg p span {
	width: 100%;
}
.bg_l p span {
	left: 0;
}
.bg_r p span {
	right: 0;
}

}
 @keyframes pic_l {
  0% {margin-top: 0px;}
  100% {margin-top: 0px;}
 }
 @keyframes pic_r {
  0% {margin-top: 200px;}
  100% {margin-top: 0px;}
 }


/* _________________________________________　inview */
/*-- print用CSS別途表記 --*/

/*--  アニメーション--*/
.hero h1,
.hero .exp{
	opacity:0;
}
.hero .exp{
}
.hero.inview_show h1,
.hero.inview_show .exp{
  animation-duration: 0.5s;
  animation-name: anim01;
  animation-delay:0s;
}
 @keyframes anim01 {
  0% {opacity: 0;transform: scale(.9);}
  100% {opacity: 1; transform: scale(1);}
 }
.corp_wrap h3{
	opacity:0;
}
.corp_wrap.inview_show h3{
  animation-duration: 0.5s;
  animation-name: anim01;
  animation-delay:0.5s;
}
 @keyframes anim02{
  0% {opacity: 0;transform: scale(.9);}
  100% {opacity: 1; transform: scale(1);}
 }
.corp_wrap .menu{
	opacity:0;
}
.corp_wrap.inview_show .menu{
  animation-duration: 0.5s;
  animation-name: anim03;
  animation-delay:0.7s;
}

.corp_wrap.inview_show .menu:last-child{
  animation-delay:1s;
}
 @keyframes anim03{
  0% {opacity: 0; transform:translate(20px,0px);}
  100% {opacity: 1; transform:translate(0,0);}
 }