@charset "utf-8";
#separate_contents_area * {
	animation-fill-mode: forwards;
}

#separate_contents_area .pickup ul li a {
    display: block;
    color: inherit;
}

.trigger_inview{
	width:10px;
	height:10px;
	border:solid 1px #f00;
	opacity:0;
	position:absolute;
	left:0;
}

#separate_contents_area {
    color: #444;
    position: relative;
    text-align: left;
    overflow: hidden;
}

@media print, screen and (min-width : 769px){
	#separate_contents_area {
	    width: 100%;
	    min-width: 980px;
	    padding: 0;
	    box-sizing: border-box;
	}
	.pickup .trigger_inview{
		top:150px;
	}
	.voice .trigger_inview{
		top:150px;
	}
}
@media screen and (max-width : 768px){

	.pickup .trigger_inview{
		top:100px;
	}
	.voice .trigger_inview{
		top:100px;
	}
}
@media print, screen and (min-width : 769px){
.contents{
	z-index:1;
}
#section_useful{
	position:relative;
	z-index:2;
	height:640px;
	margin-bottom:0;
}
#section_useful h1{
	text-align:center;
	padding: 150px 0 0;
	margin:0;
}
#section_useful h1 img{
	width:428px;
}
#section_useful h2{
	text-align:center;
	padding:35px 0 45px;
	margin:0;
}
#section_useful h2 img{
	width:507px;
}
#section_useful .useful_banner {
	width: 716px;
	margin: 0 auto;
	display: block;
}
#section_useful .btn_link{
	padding:27px 0 10px;
	text-align:center;
	margin:0;

}
#section_useful .btn_link a{
	display:inline-block;
	margin:0 6px;
	background:none;
	transition: all 0.2s;
}
#section_useful .btn_link a:hover{
	opacity:1;
	background:#fff;
}
#section_useful .btn_link a:hover img{
	opacity:1;
}
#section_useful .btn_link img{
	transition: all 0.2s;
}
/* _________________________________________ */
.pickup{
	text-align:center;
	margin:0 0 0;
	position:relative;
	z-index:2;
	background:#e6ebeb;

}
.pickup h2{
	padding:55px 0 23px;

}
.pickup .copy{
	font-size:28px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	letter-spacing:0.04em;
	padding:0 0 30px;
}
.pickup ul {
	width:880px;
	margin:0 auto 0;
	padding-bottom:28px;
		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;/*-- 両端揃え --*/
}
.pickup ul li{
	width:205px;
	margin:0 0 20px;

}
.pickup ul li a{
	display:block;
	color:inherit;
}
.pickup ul li .pic img{
	width:100%;
}
.pickup ul li .title{
	font-size:16px;
	padding:10px 0 6px;
}
/* _________________________________________ */
.fun {
	background: url(../image/fun_bg.jpg) no-repeat center center / cover;
	padding: 35px 0 45px;
	text-align: center;
	position:relative;
	z-index:2;
}
.fun h2 {
	display: block;
	width: 880px;
	margin: 0 auto 30px;
	color: #251d1b;
	font-size: 28px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	letter-spacing: 0.04em;
	position: relative;
}
.fun h2::before {
	content: '';
	background: url('../image/icon_new.png') no-repeat center / 112px 41px;
	display: block;
	width: 112px;
	height: 41px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate3d(0, -50%, 0);
}
.fun .fun_contents {
	width: 880px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.fun .fun_contents .fun_contents_block {
	width: 400px;
}
.fun .fun_contents .fun_contents_block h3 {
	margin-bottom: 10px;
}
.fun .fun_contents .fun_contents_block .movie {
	width: 398px;
	cursor: pointer;
}
.fun .fun_contents .fun_contents_block .movie img {
	width: 100%;
}
.fun .fun_contents .fun_contents_block .movie span.sp{
	display:none;
}
.fun .fun_contents .fun_contents_block .movie span {
	position: relative;
	display: block;
}
.fun .fun_contents .fun_contents_block .movie span::after {
	content: '';
	background: url(../image/icon_play.png) no-repeat center / 59px 59px;
	width: 59px;
	height: 59px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}
.fun .fun_contents .fun_contents_block .movie span.sp::after{
	content:none;
}

/* _________________________________________ */
.voice{
	text-align:center;
	margin:0 0 0;
	position:relative;
	z-index:2;
	background:#72adbb;
	padding:0 0 0;

}
.voice h2{
	padding:55px 0 23px;

}
.voice h2 img{
	width:70px;
}
.voice .copy{
	font-size:28px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	letter-spacing:0.04em;
	padding:0 0 30px;
	color:#fff;
}
.voice .corp_wrap{
	width:880px;
	margin:0 auto 0;
	padding-bottom:0;
		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;
	color:#fff;
}
.voice .corp_wrap a:hover{
	opacity:1;
}
.voice .corp_wrap .corp{
	width:430px;
}
.voice .corp_wrap .corp h3 .name{
	font-size:18px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	letter-spacing:0.04em;
}
.voice .corp_wrap .corp h3 .sama{
	font-size:14px;
	padding-left:0.1em;
}
.voice .corp_wrap .corp h3 .interview{
	font-size:14px;
	display:block;
	line-height:200%;
	padding-bottom:13px;
	border-bottom:solid 4px #fff;
	width:200px;
	margin:0 auto;
}
.voice .corp_wrap .corp .menu_wrap {
	margin:20px 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;/*-- 両端揃え --*/
}
.voice .corp_wrap .corp .menu_wrap .menu{
	width:205px;
}
.voice .corp_wrap .corp .menu_wrap .menu a{
	display:block;
	color:#666 !important;
}
.voice .corp_wrap .corp .menu_wrap .menu .pic{
	position:relative;
	background-size:205px auto;
	background-repeat:no-repeat;
}
.voice .corp_wrap .corp .menu_wrap .menu a .pic img{
	transition: all 0.4s;
	display:block;
}
.voice .corp_wrap .corp .menu_wrap .menu a:hover .pic img{
	opacity:0;
}
.voice .corp_wrap .corp .menu_wrap .menu.duskin01 .pic{
	background-image:url(../image/img_link_duskin01_on.png)
}
.voice .corp_wrap .corp .menu_wrap .menu.duskin02 .pic{
	background-image:url(../image/img_link_duskin02_on.png)
}
.voice .corp_wrap .corp .menu_wrap .menu.sagawa01 .pic{
	background-image:url(../image/img_link_sagawa01_on.png)
}
.voice .corp_wrap .corp .menu_wrap .menu.sagawa02 .pic{
	background-image:url(../image/img_link_sagawa02_on.png)
}
.voice .corp_wrap .corp .menu_wrap .menu .title{
	font-size:18px;
	line-height:200%;
	margin-top:5px;
}
.voice .corp_wrap .corp .menu_wrap .menu .copy{
	font-size:13px;
	line-height:160%;
	margin-top:3px;
	font-weight:normal;
}
.voice .corp_wrap .corp .menu_wrap .menu img{
	width:100%;
}
/* _________________________________________ */
.dream{
	text-align:center;
	margin:0 0 0;
	position:relative;
	z-index:2;
	background:#fff;
	padding:62px 0 20px;

}
#section_news{
	margin-bottom:0;
}
#section_news .section_inner {
    width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}
#section_news h3 {
    width: 880px;
    padding: 0;
    margin: 0 auto 25px auto;
    font-size: 24px;
    line-height: 1em;
	text-align:left;
}

#section_news .c-box {
	width: 890px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
}
#section_news .swiper-slide .c-slider__title {
	text-align: left;
	line-height: 1.5;
	font-size: 14px;
	color: #0064a1;
	margin-top: 5px;
}
#section_news .swiper-slide .c-slider__text {
	text-align: left;
	line-height: 1.5;
	font-size: 12px;
	margin-top: 5px;
}
#section_news .c-slider__image {
	border: none;
}


#section_news .img_slider{
	margin-bottom:80px;
	text-align: left;
}
#section_news .img_slider .pic{
	margin-right:0;
	margin-left:0;
}
#section_news .img_slider a{
	display:block;
}
#section_news .img_slider.col04 {
    padding: 0 0 0 30px;
}
#section_news .img_slider_link{
	overflow:hidden;
	margin-bottom:10px;
}
#section_news .slider_inner,
#section_news .img_slider_link .slider_inner{
	width:236px;
	display:inline-block;
	vertical-align:top;
	margin-bottom:50px;
}
#contents_footer_navigation,
#footer{
	position:relative;
	z-index:10;
}

}

/* _________________________________________　bg slide */
.bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	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_l p:nth-child(1) span{	background-image:url(../image/bg_hobby_01.jpg);}
.bg.bg_l p:nth-child(2) span{	background-image:url(../image/bg_hobby_02.jpg);}
.bg.bg_l p:nth-child(3) span{	background-image:url(../image/bg_hobby_03.jpg);}
.bg.bg_l p:nth-child(4) span{	background-image:url(../image/bg_hobby_04.jpg);}
.bg.bg_l p:nth-child(5) span{	background-image:url(../image/bg_hobby_05.jpg);}
.bg.bg_l p:nth-child(6) span{	background-image:url(../image/bg_hobby_06.jpg);}

.bg.bg_r p:nth-child(1) span{	background-image:url(../image/bg_work_01.jpg);}
.bg.bg_r p:nth-child(2) span{	background-image:url(../image/bg_work_02.jpg);}
.bg.bg_r p:nth-child(3) span{	background-image:url(../image/bg_work_03.jpg);}
.bg.bg_r p:nth-child(4) span{	background-image:url(../image/bg_work_04.jpg);}
.bg.bg_r p:nth-child(5) span{	background-image:url(../image/bg_work_05.jpg);}
.bg.bg_r p:nth-child(6) span{	background-image:url(../image/bg_work_06.jpg);}

.bg.bg_sp p:nth-child(1) span {	background-image:url(../image/bg_hobby_01_sp.jpg);}
.bg.bg_sp p:nth-child(2) span {	background-image:url(../image/bg_work_01_sp.jpg);}
.bg.bg_sp p:nth-child(3) span {	background-image:url(../image/bg_hobby_02_sp.jpg);}
.bg.bg_sp p:nth-child(4) span {	background-image:url(../image/bg_work_02_sp.jpg);}
.bg.bg_sp p:nth-child(5) span {	background-image:url(../image/bg_hobby_03_sp.jpg);}
.bg.bg_sp p:nth-child(6) span {	background-image:url(../image/bg_work_03_sp.jpg);}
.bg.bg_sp p:nth-child(7) span {	background-image:url(../image/bg_hobby_04_sp.jpg);}
.bg.bg_sp p:nth-child(8) span {	background-image:url(../image/bg_work_04_sp.jpg);}
.bg.bg_sp p:nth-child(9) span {	background-image:url(../image/bg_hobby_05_sp.jpg);}
.bg.bg_sp p:nth-child(10) span {	background-image:url(../image/bg_work_05_sp.jpg);}
.bg.bg_sp p:nth-child(11) span {	background-image:url(../image/bg_hobby_06_sp.jpg);}
.bg.bg_sp p:nth-child(12) span {	background-image:url(../image/bg_work_06_sp.jpg);}

.bg p span {
	position:absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background-size: auto 750px;
	background-position: center 0;
	position:absolute;
	top: 0;
	width: 50%;
	height: 640px;
	background-size: auto 640px;
	background-position: center 0;
}
.bg_l p span {
	left: 0;
}
.bg_r p span {
	right: 0;
}
@media print, screen and (min-width : 1300px){

.bg p span {
	background-size: cover;
}
}
 @keyframes pic_l {
  0% {margin-top: -200px;}
  100% {margin-top: 0px;}
 }
 @keyframes pic_r {
  0% {margin-top: 200px;}
  100% {margin-top: 0px;}
 }

@media screen{
#section_useful h1,
#section_useful h2,
#section_useful .useful_banner{
	opacity:0;
}
#section_useful.inview_show h1,
#section_useful.inview_show h2,
#section_useful.inview_show .useful_banner{
  animation-duration: 0.5s;
  animation-name: pop;
  animation-delay:0s;
}
/*--  --*/
.pickup  h2,
.pickup  .copy,
.pickup  li,
.voice  h2,
.voice  .copy,
.voice  li{
	opacity:0;
}
.pickup.inview_show h2,
.voice.inview_show h2{
  animation-duration: 0.5s;
  animation-name: pop;
  animation-delay:0.0s;
}
.pickup.inview_show .copy,
.voice.inview_show .copy{
  animation-duration: 0.5s;
  animation-name: pop;
  animation-delay:0.3s;
}
.pickup.inview_show li{
  animation-duration: 0.5s;
  animation-name: qa_h;
}
.pickup.inview_show li:nth-child(1){  animation-delay:0.5s;}
.pickup.inview_show li:nth-child(2){  animation-delay:0.6s;}
.pickup.inview_show li:nth-child(3){  animation-delay:0.7s;}
.pickup.inview_show li:nth-child(4){  animation-delay:0.8s;}
.pickup.inview_show li:nth-child(5){  animation-delay:0.9s;}
.pickup.inview_show li:nth-child(6){  animation-delay:1s;}
.pickup.inview_show li:nth-child(7){  animation-delay:1.1s;}
.pickup.inview_show li:nth-child(8){  animation-delay:1.2s;}

}
/*--  --*/
 @keyframes pop {
  0% {opacity: 0;transform: scale(.9);}
  100% {opacity: 1; transform: scale(1);}
 }

 @keyframes fade{
  0% {opacity: 0;}
  100% {opacity: 1;}
 }
 @keyframes bounce {
    0% { opacity: 0; transform: scale(.9); }
    50% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
 }
 @keyframes qa_h{
  0% {opacity: 0; transform:translate(20px,0px);}
  100% {opacity: 1; transform:translate(0,0);}
 }
  @keyframes anim01 {
  0% {opacity: 0;transform: scale(.9);}
  100% {opacity: 1; transform: scale(1);}
 }
 .voice .corp_wrap h3{
	opacity:0;
}
.voice.inview_show .corp_wrap 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);}
 }
.voice .corp_wrap .menu{
	opacity:0;
}
.voice.inview_show .corp_wrap .menu{
  animation-duration: 0.5s;
  animation-name: anim03;
  animation-delay:0.7s;
}

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