#section_mylist{
	padding-bottom:1px;
}
@media screen and (min-width: 737px) {
.layout.pc{
    position:absolute;
    left:50%;
    z-index:-1;
    top:0px;
    margin-left:-720px;
    opacity:0.3;
    display:block;
    opacity:0;
    display:none;
}
}
@media screen and (max-width: 736px) {
.layout.sp{
    width:100%;
    position:absolute;
    left:0;
    z-index:-1;
    top:14vw;
    opacity:0.3;
    display:block;
    opacity:0;
    display:none;
}
}


@media print, screen and (min-width : 769px){
.sp{
	display:none;
}
#side_navigation{
	display:none;
}
.contents{
	position:relative;
	color:#666;
}
.contents .btn_useful{
	position:absolute;
	top:55px;
	left:50%;
	margin-left:-490px;
	z-index:3;

}
.contents .btn_voice{
	position:absolute;
	top:55px;
	left:50%;
	margin-left:-33px;
	z-index:3;

}
.contents .btn_useful a{
	display:inline-block;
	margin-right:30px;
}
.contents .btn_preview{
	position:absolute;
	top:35px;
	right:50%;
	margin-right:-490px;
	z-index:3;

}
.contents .btn_preview a{
	display:inline-block;
}
.contents .bg{
	width:100%;
	height:640px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	top: 0;
	left: 0;
	z-index:-1;
	position:absolute;
	overflow:hidden;
}
.contents .bg.fix{
	position:fixed;
	top:56px;
}
.contents .wrap{
	padding-top:40px;
	background-color:#fff;
}
.contents.duskin01 .bg{
	background-image:url(../duskin01/image/hero.jpg);
}
.contents.duskin02 .bg{
	background-image:url(../duskin02/image/hero.jpg);
}
.contents.sagawa01 .bg{
	background-image:url(../sagawa01/image/hero.jpg);
}
.contents.sagawa02 .bg{
	background-image:url(../sagawa02/image/hero.jpg);
}
.contents .hero{
	height:640px;
	position:relative;
}
.contents .hero h1{
	position:absolute;
	left:50%;
	margin-left:-337px;
	top:140px;
}
.contents .hero .exp{
	font-size:16px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	color:#fff;
	text-align:center;
	padding-top:455px;
	line-height:180%;
	position:relative;
	z-index:2;
}

.contents .hero .exp{
}
/* _________________________________________ */
.contents .navi{
	width:930px;
	margin:0 auto 40px;
}
.contents .navi ul{	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction:row;
	-webkit-flex-wrap: wrap;
	flex-wrap:wrap;
	justify-content: center;/*-- 中央揃え --*/

}
.contents .navi li{
	width:50%;
	text-align:center;
	position:relative;
}
.contents .navi li a{
	display:block;
	height:70px;
	position:relative;
	z-index:2;
}
.contents .navi li img{
	width:330px;
	display:block;
	margin:0 auto;

}
.contents .navi.btm{
	margin-top:40px;
}
.contents .navi.btm li {
	height:70px;
}
.contents .navi.btm li a{
	display:block;
	height:70px;
	width:100%;
}
.contents .navi li p{
	position:absolute;
	width:100%;
	top:0;
	left:0;
	text-align:center;
	color:#fff;
	line-height:54px;
	font-size:18px;
	z-index:2;
}
.contents .navi.btm li p{
	top:auto;
	bottom:0;
}
.contents .navi.btm li img{
	position:absolute;
	left:67px;
	bottom:0;
}
.contents .wrap .navi li:after{
	background:#999999;
	height:54px;
	width:100%;
	content:"";
	position:absolute;
	top:0;
	left:0;
}
.contents .navi.btm li:after{
	top:auto;
	bottom:0;
}
.contents .wrap .navi li.current:after{
	background:#509EAE;
}

/* _________________________________________ */
.contents .article{
	width:930px;
	margin:0 auto;

}
.contents .article h2{
	text-align:center;
	color:#509EAE;
	font-size:46px;
	margin:60px auto 0;
	line-height:110%;
	letter-spacing:0.04em;
	width:1080px;
	margin-left:-75px;
}
.contents .article h2 span{
	font-size:28px;
	display:block;
}
.contents .article .intro_pic{
	text-align:center;
	margin:35px 0 0;
}
.contents .article .intro_pic img{
	width:200px;
}
.contents .article .intro_exp{
	margin:25px 0 0;
	font-size:20px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	line-height:180%;
	text-align:center;
}
.contents .article .qa{
	margin:80px 0 0;
}
.contents .article .qa dt,
.contents .article .qa dd{
	background-size:50px;
	background-repeat:no-repeat;
	background-position:left top;
	padding-left:80px;
}
.contents .article .qa dt{
	background-image:url(../duskin01/image/ico_q.gif);
	margin-bottom:30px;
}
.contents .article .qa dd{
	background-image:url(../duskin01/image/ico_a.gif);
	margin-bottom:55px;
}
.contents.duskin02 .article .qa dd{
	background-image:url(../duskin02/image/ico_a.gif);
}

/* .contents .article .qa dt h3{ */
.contents .article .qa dt span{
	display: block;
	color:#509EAE;
	font-size:18px;
	line-height:140%;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	line-height:50px;
}
.contents .article .qa dd h3{
	color:#E6AD38;
	font-size:18px;
	line-height:140%;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	line-height:50px;
}
.contents .article .qa dd .exp{
	line-height:220%;
	font-size:18px;
}
.contents .article .qa dd .caption{
	font-size:12px;
	margin-top:10px;
	line-height:160%;
	font-family: "HondaGlobalFontJP-Light", sans-serif;
}
.contents .article .qa dd .pic{
	margin:40px 0 0 -80px;
}
.contents .article .qa dd .pic img{
	height:620px;
}
.contents .article .qa dd .pic.clm{	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 .article .qa dd .pic.clm img{
	height:300px;
}
/* _________________________________________ */
.contents .article .profile{
	position:relative;
	height:455px;

}
.contents.duskin02 .article .profile{
	padding-left:465px;
}
.contents.sagawa01 .article .profile,
.contents.sagawa02 .article .profile{
	padding-top:20px;
}
.contents .article .profile .balloon{
	position:relative;
	z-index:2;
}
.contents.duskin02 .article .profile .balloon{
	padding-top:45px;
	margin-left:-30px;
	margin-bottom:-10px;
}
.contents .article .profile .h{
	margin:55px 0 0;
}
.contents .article .profile .name{
	color:#E6AD38;
	font-size:30px;
	margin:25px 0 0;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	letter-spacing:0.08em;
}
.contents .article .profile .kana{
	font-size:14px;
	font-weight:normal;
	letter-spacing:0em;
}
.contents .article .profile .san{
	color:#666;
	font-size:14px;
	letter-spacing:0em;
}
.contents .article .profile .member{
	font-size:12px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	margin:8px 0 0;
}
.contents .article .profile .exp{
	width:460px;
	margin:17px 0 0;
	line-height:160%;
	font-size:15px;
	position:relative;
	z-index:2;
}
.contents .article .profile .photo{
	position:absolute;
	right:-10px;
	bottom:0;
}
.contents.duskin02 .article .profile .photo{
	left:10px;
}
.contents.sagawa01 .article .profile .photo{
	right:-70px;
}
.contents.sagawa02 .article .profile .photo{
	right:-90px;
}
.contents .article .profile .photo img.pc{
	display:block;
}

/* _________________________________________ */
.contents .type_bg{
	background:#E5EBEF;
	padding:0 0 70px;
}
.contents .type_bg h3{
	text-align:center;
	padding:63px 0 62px;
	font-family: "HondaGlobalFontJP-Bold", sans-serif;
	font-size:24px;
}
.contents .type_bg .inner{
	width:930px;
	margin:0 auto;
		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 .type_bg .photo{
	width:445px;
}
.contents .type_bg .photo img{
	width:100%;
	display:block;
}
.contents .type_bg .clm{
	width:450px;
	position:relative;
}
.contents .type_bg .clm .exp{
	font-size:14px;
	line-height:1.6;
}
.contents .type_bg .clm .btn_type{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
}
.contents .type_bg .clm .btn_type a{
	margin-top:8px;
	display:block;
	line-height:50px;
	font-size:14px;
	color:#fff !important;
	padding-left:30px;
	background-color:#808080;
	background-image:url(../../../image/arrow.png);
	background-size:auto 12px;
	background-repeat:no-repeat;
	background-position:right 25px center;
}

.contents .type_bg .inner .caption {
	margin-top: 15px;
	font-size: 12px;
	font-family: "HondaGlobalFontJP-Light", sans-serif;
}

/* _________________________________________ */
.bnr_article{
	text-align:center;
	width:930px;
	margin:0 auto 0;
}
.bnr_article img{
	width:100%;
}
/* _________________________________________ */
#section_news{
	margin:110px 0 0;
	padding-bottom:1px;
}
#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.col04 {
    padding: 0 0 0 30px;
	margin-bottom:60px;
	text-align: left;
	overflow: hidden;
}
#section_news .slider_inner {
	width:236px;
	float: left;
	vertical-align:top;
	margin-bottom:50px;
}
#section_news .img_slider .pic {
    margin-right: 0;
    margin-left: 0;
}
}
/* _________________________________________ PC SP共通カラー設定 */
.contents.sagawa01 .article .qa dt{background-image:url(../sagawa01/image/ico_q.gif);}
.contents.sagawa01 .article .qa dd{background-image:url(../sagawa01/image/ico_a.gif);}
.contents.sagawa02 .article .qa dt{background-image:url(../sagawa02/image/ico_q.gif);}
.contents.sagawa02 .article .qa dd{background-image:url(../sagawa02/image/ico_a.gif);}

.contents.duskin02 .article .qa dd h3{
	color:#E79491;
}
.contents.sagawa01 .article .qa dd h3{
	color:#86B5E5;
}
.contents.sagawa02 .article .qa dd h3{
	color:#97B76F;
}

.contents.duskin02 .article .profile .name{
	color:#E79491;
}
.contents.sagawa01 .article .profile .name{
	color:#86B5E5;
}
.contents.sagawa02 .article .profile .name{
	color:#97B76F;
}

.contents.sagawa .type_bg{
	background:#3B499F;
	color:#fff;
}
.contents.sagawa .type_bg .clm .btn_type a{
	background-color:#CBCFE5;
	color:#333333 !important;
	background-image:url(../../../image/arrow_bk.png);
}


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

.contents  .trigger_inview{
	width:10px;
	height:10px;
	border:solid 1px #f00;
	opacity:0;
	position:absolute;
	left:0;
}
@media print, screen and (min-width : 769px){
.contents  .intro_pic .trigger_inview{
	top:150px;
}
.contents  .qa dt .trigger_inview{
	top:150px;
}
.contents  .profile .trigger_inview{
	top:150px;
}
.contents  .type_bg .trigger_inview{
	top:150px;
}
}
@media screen and (max-width : 768px){
.contents  .trigger_inview{
	top:50px;
}
}
/*--  アニメーション--*/

@media screen{
.hero h1,
.hero .exp{
	opacity:0;
}
.hero .exp{
}
.hero.inview_show h1,
.hero.inview_show .exp{
  animation-duration: 0.5s;
  animation-name: pop;
  animation-delay:0s;
}
/*--  --*/
.contents  h2{
	opacity:0;
}
.contents  h2.inview_show{
  animation-duration: 0.5s;
  animation-name: bounce;
  animation-delay:0.5s;
}
/*--  --*/
.contents  .intro_pic,
.contents  .intro_exp{
	opacity:0;
	position:relative;
}
.contents  .intro_pic.inview_show{
  animation-duration: 0.5s;
  animation-name: pop;
  animation-delay:0.0s;
}
.contents  .intro_exp.inview_show{
  animation-duration: 0.5s;
  animation-name: pop;
  animation-delay:0.3s;
}
/*-- qa dt --*/
.contents .qa dt{
	opacity:0;
}
.contents .qa dt h3{
	opacity:0;
}
.contents .qa dt.inview_show{
  animation-duration: 0.5s;
  animation-name: fade;
  animation-delay:0.3s;
}
/* .contents .qa dt.inview_show h3{ */
.contents .qa dt.inview_show span{
  animation-duration: 0.5s;
  animation-name: qa_h;
  animation-delay:0.3s;
}
/*-- qa dd --*/
.contents .qa dd{
	opacity:0;
}
.contents .qa dd h3,
.contents .qa dd .exp,
.contents .qa dd .caption,
.contents .qa dd .pic{
	opacity:0;
}
.contents .qa dd.inview_show{
  animation-duration: 0.5s;
  animation-name: fade;
  animation-delay:0.5s;
}
.contents .qa dd.inview_show h3{
  animation-duration: 0.5s;
  animation-name: qa_h;
  animation-delay:0.5s;
}
.contents .qa dd.inview_show .exp,
.contents .qa dd.inview_show .caption{
  animation-duration: 0.5s;
  animation-name: qa_h;
  animation-delay:0.7s;
}
.contents .qa dd.inview_show .pic{
  animation-duration: 0.5s;
  animation-name: fade;
  animation-delay:1.0s;
}

/*-- profile --*/
.contents .profile{
}
.contents .profile .balloon,
.contents .profile .h,
.contents .profile .name,
.contents .profile .member,
.contents .profile .exp{
	opacity:0;
}
.contents .profile.inview_show .balloon{
  animation-duration: 0.5s;
  animation-name: bounce;
  animation-delay:0.0s;
}
.contents .profile.inview_show .h,
.contents .profile.inview_show .name,
.contents .profile.inview_show .member,
.contents .profile.inview_show .exp{
  animation-duration: 0.5s;
  animation-name: qa_h;
  animation-delay:0.5s;
}

/*-- type_bg--*/
.contents .type_bg h3{
	opacity:0;
}
.contents .type_bg.inview_show h3{
  animation-duration: 0.5s;
  animation-name: pop;
  animation-delay:0.0s;
}
.contents .type_bg .inner{
	opacity:0;
}
.contents .type_bg.inview_show .inner{
  animation-duration: 0.5s;
  animation-name: pop;
  animation-delay:0.3s;
}

}
/*--  --*/
 @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);}
 }