@charset "UTF-8";


/* コンテンツエリア */
#hsj h2 {margin: 0 0 100px 0;padding: 0;text-align: left;position: relative;}
#hsj h2 strong {font-size: 80px;line-height: 1.1;color: #222;font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.01em;font-weight: normal !important;margin-right: 32px;display: inline-block;}
#hsj h2 span {font-size: 20px;line-height: 1.5;color: #888;font-family: 'HondaGlobalFontJP-Regular', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.03em;font-weight: normal !important;display: inline-block;}
#hsj h2::after {content: "";display: block;width: 40px;height: 6px;background-color: #C00;position: absolute;bottom: -50px;left: 0;}
#hsj h3 {font-size: 48px;line-height: 1.5;margin: 0 0 25px 0;padding: 0;color: #C00;font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.01em;text-align: left;font-weight: normal !important;position: relative;}
#hsj h4 {font-size: 26px;line-height: 1.5;margin: 0 0 25px 0;padding: 0;color: #222;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.01em;text-align: left;font-weight: normal !important;position: relative;}
#hsj p {font-size: 16px;line-height: 2.0;margin: 0;padding: 0;color: #222;text-align: left;font-family: 'HondaGlobalFontJP-Regular', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.03em;font-weight: normal !important;}
#hsj p.caution {font-size: 14px;line-height: 1.5;margin-top: 8px;}
#hsj hgroup p {font-size: 18px;line-height: 2.1;}


/* section */
#hsj #sec01.contents_area .inner .innerBox {width: 100%;margin: 0 auto;padding: 0;}
#hsj #sec01.contents_area .inner .innerBox ul {width: 94%;margin: 0 auto;padding: 0;display: flex;flex-flow: row wrap;justify-content: flex-start;gap: 60px 3.5%;}
#hsj #sec01.contents_area .inner .innerBox ul li {width: 31%;margin: 0;padding: 0;list-style: none;position: relative;}
#hsj #sec01.contents_area .inner .innerBox ul li img {/*width: 100%;height: 100%;object-fit: cover;display: block;*/}
#hsj #sec01.contents_area .inner .innerBox ul li p {margin: 0;font-size: 16px;line-height: 1.7;color: #222;margin-top: 20px;padding: 0;box-sizing: border-box;}
#hsj #sec01.contents_area .inner .innerBox ul li p strong {font-size: 20px;margin: 0 0 8px 0;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;display: block;color: #C00;}
#hsj #sec01.contents_area .inner .innerBox ul li p strong::after {content: '';display: inline-block;width: 10px;height: 18px;background-image: url("/jp/HSJ/assets/images/arrowLink_r.png");background-size: contain;vertical-align: middle;position: relative;top: -1px;left: 15px;background-repeat: no-repeat;}
#hsj #sec01.contents_area .inner .innerBox ul li p strong.blank::after {content: '';display: inline-block;width: 17px;height: 17px;background-image: url("/jp/HSJ/assets/images/arrowLink_blank_r.png");background-size: contain;vertical-align: middle;position: relative;top: -2px;left: 15px;background-repeat: no-repeat;}

#hsj #sec01.contents_area .inner .innerBox ul li p strong a {color: #C00;text-decoration: none;transition:all .5s;}
#hsj #sec01.contents_area .inner .innerBox ul li p strong a:hover {opacity: 0.5;transition:all .5s;}

#hsj #sec01.contents_area .inner_main_visual {width: 100%;margin: 0px;padding: 0;text-align: center;position: relative;}
/*#hsj #sec01.contents_area .inner_main_visual .icon {width: 135px;margin: 0px;padding: 0;text-align: center;position: absolute;bottom: -12%;left: 50%;transform: translateY(0%) translateX(-50%);}*/
#hsj #sec01.contents_area .inner .innerBox ul li p strong.nolink::after {display: none;}

#hsj #sec01.contents_area .inner .innerBox .heading {width: 100%;margin: 60px 0 40px 0;padding: 0;position: relative;border-bottom: solid 3px #C00;}
#hsj #sec01.contents_area .inner .innerBox .heading h5 {font-size: 20px;line-height: 1.1;margin: 0;padding: 0;color: #FFF;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.01em;text-align: left;font-weight: normal !important;position: relative;top: 3px;/*position: absolute;top: -4px;left: 1%;*//*position: absolute;top: 36%;left: 3%;transform: translateY(-50%) translateX(0%);*/}
#hsj #sec01.contents_area .inner .innerBox .heading::after {content: "";display: inline-block;width: 18px;height: 34px;background-image: url("../images/whatwedo_line.png");background-size: contain;background-repeat: no-repeat;position: absolute;bottom: -34px;right: -2px;}
#hsj #sec01.contents_area .inner .innerBox .heading h5 strong {position: relative;display: inline-block;padding: 20px 40px;/*color: #fff;font-size: 18px;line-height: 1.3em;*/text-decoration: none;}
#hsj #sec01.contents_area .inner .innerBox .heading h5 strong::before {content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: -1;/*border-radius: 1px;*/background-color: #C00;transform: skewX(-30deg);filter: drop-shadow(8px 8px 0px rgba(0, 0, 0, 0.1));}

#hsj #sec01.contents_area .inner .innerBox .text {width: 94%;margin: 0 auto;}

#hsj #sec01.contents_area .inner .innerBox ul li a img {opacity: 1; transition: 0.5s;}
#hsj #sec01.contents_area .inner .innerBox ul li a:hover img {opacity: 0.5;transition: 0.5s;}

#hsj #sec01.contents_area .inner.mb0 {padding: 100px 0 0 0;}
#hsj #sec01.contents_area .pageNavi{width: 100%;background-color: #222;}
#hsj #sec01.contents_area .pageNavi ul{width: 90%;max-width: 1400px;margin: 0px auto !important;padding: 0;text-align: left;display: flex;flex-flow: row wrap;justify-content: space-between;gap: 0px 0px;}
#hsj #sec01.contents_area .pageNavi ul li{width: 20%;box-sizing: border-box;border-left: solid 1px #FFF;position: relative;transition: 0.5s;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(1){width: 22%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(2){width: 24%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(3){width: 15%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(4){width: 18%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(5){width: 21%;border-right: solid 1px #FFF;}
#hsj #sec01.contents_area .pageNavi ul li p {width: 100%; font-size: 16px;line-height: 2.0;margin: 0;padding: 30px 0;color: #FFF;text-align: center;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.03em;font-weight: normal !important;transition: 0.5s;box-sizing: border-box;}
#hsj #sec01.contents_area .pageNavi ul li.active {background-color: #C00;}
/*#hsj #sec01.contents_area .pageNavi ul li.active::after {content: "";display: inline-block;width: 0;height: 0;border-style: solid;border-right: 20px solid transparent;border-left: 20px solid transparent;border-top: 35px solid #cc0000;border-bottom: 0;position: absolute;bottom: -25px;left: 50%;transform: translateY(0%) translateX(-50%);z-index: 101;}*/
#hsj #sec01.contents_area .pageNavi ul li.active p {font-size: 16px;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;color: #FFF;}
#hsj #sec01.contents_area .pageNavi ul li a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#hsj #sec01.contents_area .pageNavi ul li:hover {background-color: #CC0000;transition: 0.5s;}
#hsj #sec01.contents_area .pageNavi ul li:hover p {color: #FFF;transition: 0.5s;}
	
#hsj #sec02.contents_area.glay h4 {font-size: 24px;text-align: center;margin: 0 auto 60px auto;}
#hsj #sec02.contents_area.glay .interview_link {width: 392px;height: 392px;margin: 0 auto;position:relative;}
#hsj #sec02.contents_area.glay .interview_link .slide-text {position: absolute;bottom: 0;left: 0;width: 100%;height: 30%;background: rgba(0, 0, 0, 0.6);color: #fff;}
#hsj #sec02.contents_area.glay .interview_link .slide-text::after {content: "";display: inline-block;width: 18px;height: 28px;background-image: url("../images/interview_arrow.png");background-size: contain;background-repeat: no-repeat;position: absolute;top: 50%;right: 25px;transform: translateY(-50%) translateX(0%);}
#hsj #sec02.contents_area.glay .interview_link .slide-text p {font-size: 15px;line-height: 1.6;color: #FFF;padding: 25px;box-sizing: border-box;}
#hsj #sec02.contents_area.glay .interview_link .slide-text p strong {font-size: 18px;line-height: 1.1;margin: 0 0 8px 0;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;display: block;}
#hsj #sec02.contents_area.glay .interview_link .slide-text p span {font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;display: block;}
#hsj #sec02.contents_area.glay .interview_link:hover {opacity: 0.7;transition:all .5s;}

@media screen and (max-width: 1400px) {
#hsj #sec01.contents_area .pageNavi ul li p {font-size: 1.15vw;}
#hsj #sec01.contents_area .pageNavi ul li.active p {font-size: 1.15vw;}
}
@media screen and (max-width: 1080px) {
/*
#hsj #sec01.contents_area .pageNavi ul li:nth-child(1){width: 50%;border-bottom: solid 1px #FFF;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(2){width: 50%;border-right: solid 1px #FFF;border-bottom: solid 1px #FFF;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(3){width: 33%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(4){width: 34%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(5){width: 33%;border-right: solid 1px #FFF;}

#hsj #sec01.contents_area .pageNavi ul li p {font-size: 1.3vw;}
#hsj #sec01.contents_area .pageNavi ul li.active p {font-size: 1.3vw;}
*/
}
@media screen and (max-width: 834px) {
#hsj #sec01.contents_area .inner.mb0 {padding: 12vw 0 0 0;}
#hsj #sec01.contents_area .pageNavi ul{width: 100%;padding: 0;}
#hsj #sec01.contents_area .pageNavi ul li{border-left: none !important;border-right: none !important;border-bottom: solid 1px #FFF;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(1){width: 100%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(2){width: 100%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(3){width: 100%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(4){width: 100%;}
#hsj #sec01.contents_area .pageNavi ul li:nth-child(5){width: 100%;}
#hsj #sec01.contents_area .pageNavi ul li p {font-size: 2.4vw;padding: 15px 5%;text-align: left;}
#hsj #sec01.contents_area .pageNavi ul li.active p {font-size: 2.4vw;}
#hsj #sec01.contents_area .pageNavi ul li.active::after {display: none;}
}
@media screen and (max-width: 512px) {
#hsj #sec01.contents_area .pageNavi ul li p {font-size: 3.4vw;}
#hsj #sec01.contents_area .pageNavi ul li.active p {font-size: 3.4vw;}
#hsj #sec02.contents_area.glay h4 {font-size: 4vw;text-align: center;margin: 0 auto 8vw auto;}
#hsj #sec02.contents_area.glay .interview_link {width: 88%;height:88%;}
#hsj #sec02.contents_area.glay .interview_link .slide-text {height: 30%;}
#hsj #sec02.contents_area.glay .interview_link .slide-text::after {width: 12px;height: 20px;}
#hsj #sec02.contents_area.glay .interview_link .slide-text p {font-size: 3.4vw;padding: 4vw;}
#hsj #sec02.contents_area.glay .interview_link .slide-text p strong {font-size: 4vw;margin: 0 0 10px 0;}
}

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1280px) {
#hsj #sec01.contents_area .inner .innerBox ul {gap: 4vw 3.5%;}
#hsj #sec01.contents_area .inner .innerBox ul li p {font-size: 1.2vw;}
#hsj #sec01.contents_area .inner .innerBox ul li p strong {font-size: 1.4vw;margin: 0 0 0.8vw 0;}
}

@media screen and (max-width: 1080px) {
}

@media screen and (max-width: 834px) {
/* コンテンツエリア */
#hsj h2 {margin-bottom: 16vw}
#hsj h2 strong {font-size: 7.8vw;}
#hsj h2 span {font-size: 3.6vw;margin-top: 3vw;}
#hsj h2::after {bottom: -8vw;}
#hsj h3 {font-size: 6.2vw;margin: 0 0 5vw 0;}
#hsj h4 {font-size: 4.0vw;line-height: 1.7;margin: 0 0 5vw 0;}
#hsj p {font-size: 3.4vw;}
#hsj p.caution {font-size: 2.8vw;}
#hsj hgroup p {font-size: 3.4vw;}
}

@media screen and (max-width: 512px) {
/* section */
#hsj #sec01.contents_area .inner .innerBox ul {width: 88%;gap: 8vw 0;}
#hsj #sec01.contents_area .inner .innerBox ul li {width: 100%;}
#hsj #sec01.contents_area .inner .innerBox ul li p {font-size: 3.4vw;margin-top: 4vw;}
#hsj #sec01.contents_area .inner .innerBox ul li p strong {font-size: 4.4vw;margin: 0 0 8px 0;}
#hsj #sec01.contents_area .inner .innerBox ul li p strong::after {width: 10px;height: 18px;top: -1px;left: 15px;}

/*#hsj #sec01.contents_area .inner .innerBox .heading h5 {font-size: 4.4vw;top: 36%;left: 10vw;}*/
#hsj #sec01.contents_area .inner .innerBox .text {width: 88%;margin: 0 auto;}
	
#hsj #sec01.contents_area .inner .innerBox .heading {width: 100%;margin: 8vw 0 8vw 0;}
#hsj #sec01.contents_area .inner .innerBox .heading h5 {font-size: 3.6vw;top: 3px;}
#hsj #sec01.contents_area .inner .innerBox .heading h5 strong {padding: 4vw 5vw;}
}


#hsj #sec02.contents_area .inner .innerBox {margin: 0;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li {filter: alpha(opacity=100);opacity: 1.0;transition: 0.3s;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li:hover {filter: alpha(opacity=70);opacity: 0.5;transition: 0.3s;}
#hsj #sec02.contents_area .inner .innerBox .prev-arrow {margin: 0px;z-index: 101;width: 12px;position: absolute;bottom: -4px;left: 40%;transform: translateY(0%) translateX(-50%);cursor: pointer;filter: alpha(opacity=100);opacity: 1.0;transition: 0.3s;}
#hsj #sec02.contents_area .inner .innerBox .prev-arrow:hover {filter: alpha(opacity=70);opacity: 0.7;transition: 0.3s;}
#hsj #sec02.contents_area .inner .innerBox .next-arrow {margin: 0px;z-index: 101;width: 12px;position: absolute;bottom: -4px;right: 40%;transform: translateY(0%) translateX(50%);}
#hsj #sec02.contents_area .inner .innerBox .next-arrow:hover {filter: alpha(opacity=70);opacity: 0.7;transition: 0.3s;}
.slick-dotted.slick-slider {margin-bottom: 20px;}
/* dotsを丸くカスタマイズするCSS */
.dots-wrap {display: flex;justify-content: center;margin-top: 40px !important;}
.dots-wrap li {width: 12px;height: 12px;margin: 0 12px;background: #CCC;border-radius: 50%;cursor: pointer;}
.dots-wrap li:hover,.dots-wrap li.slick-active {background: #C00;}
.dots-wrap li button {display: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: none;padding: 0;border: none;background-color: transparent;}
/* スライド間の余白を設定 */
.slide-items .slick-slide {padding: 0 !important;margin: 0 8px !important;box-sizing: border-box;}
/* 左右の余白分を相殺して全体を中央に */
.slide-items .slick-list {margin: 0 -8px;}
#hsj #sec02.contents_area .inner .innerBox .slide-items {display: none;}
#hsj #sec02.contents_area .inner .innerBox .slide-items.slick-initialized {display: block;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li {position: relative;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text {width: 100%;position: absolute;bottom: 0;left: 0;box-sizing: border-box;background: rgba(0, 0, 0, 0.6);}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p {font-size: 15px;line-height: 1.6;color: #FFF;padding: 15px 20px;margin: 0;box-sizing: border-box;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p strong {font-size: 18px;line-height: 1.1;margin: 0 0 8px 0;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;display: block;color: #FFF;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p span {font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;display: block;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p strong::after {display: none;}
@media screen and (max-width: 1280px) {
#hsj #sec02.contents_area .inner .innerBox .prev-arrow {left: 31vw;}
#hsj #sec02.contents_area .inner .innerBox .next-arrow {right: 31vw;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p {font-size: 1vw;padding: 1.3vw;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p strong {font-size: 1.2vw;}
}
@media screen and (max-width: 834px) {
#hsj #sec02.contents_area .inner .innerBox .slide-items li:hover {filter: alpha(opacity=100);opacity: 1.0;transition: 0.3s;}
#hsj #sec02.contents_area .inner .innerBox .prev-arrow {left: 25vw;}
#hsj #sec02.contents_area .inner .innerBox .prev-arrow:hover {filter: alpha(opacity=100);opacity: 1.0;transition: 0.3s;}
#hsj #sec02.contents_area .inner .innerBox .next-arrow {right: 25vw;}
#hsj #sec02.contents_area .inner .innerBox .next-arrow:hover {filter: alpha(opacity=100);opacity: 1.0;transition: 0.3s;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p {font-size: 1.4vw;padding: 2vw;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p strong {font-size: 1.6vw;}
}
@media screen and (max-width: 512px) {
#hsj #sec02.contents_area .inner .innerBox .prev-arrow {left: 12vw;}
#hsj #sec02.contents_area .inner .innerBox .next-arrow {right: 12vw;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p {font-size: 3.0vw;padding: 4vw;}
#hsj #sec02.contents_area .inner .innerBox .slide-items li .slide-text p strong {font-size: 3.4vw;}
}