@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: 28px;line-height: 1.5;margin: 0 0 25px 0;padding: 0;color: #222;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: 24px;line-height: 1.5;margin: 0 0 60px 0;padding: 0;color: #222;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.01em;text-align: center;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 .contents_area .inner .innerBox {width: 88%;margin: 0 auto;padding: 0;}
#hsj .contents_area .inner .innerBox ul {width: 100%;margin: 0;padding: 0;display: flex;flex-flow: row wrap;justify-content: space-between;gap: 5px 0px;}
#hsj .contents_area .inner .innerBox ul li {width: 406px;height: 406px;margin: 0;padding: 0;list-style: none;position: relative;overflow: hidden;}
#hsj .contents_area .inner .innerBox ul li img {width: 100%;height: 100%;object-fit: cover;display: block;}
#hsj .contents_area .inner .innerBox ul li p {font-size: 15px;line-height: 1.6;color: #FFF;padding: 25px;box-sizing: border-box;}
#hsj .contents_area .inner .innerBox ul li p strong {font-size: 18px;line-height: 1.1;margin: 0 0 8px 0;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;display: block;}
#hsj .contents_area .inner .innerBox ul li p span {font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;display: block;}

/* 文字部分の初期設定（下側に隠しておく） */
#hsj .contents_area .inner .innerBox ul li .slide-text {position: absolute;bottom: 0;left: 0;width: 100%;height: 30%;background: rgba(0, 0, 0, 0.6);color: #fff;/*display: flex;justify-content: center;align-items: center;*/transform: translateY(100%);transition: transform 0.5s ease;}
/* マウスオン（ホバー）時の動き（元の位置に戻す） */
#hsj .contents_area .inner .innerBox ul li:hover .slide-text {transform: translateY(0); /* 元の位置に戻る */}
#hsj .contents_area .inner .innerBox ul li .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 .contents_area .inner_main_visual {width: 100%;margin: 0px;padding: 0;text-align: center;position: relative;}
#hsj .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%);}


@media screen and (max-width: 1580px) {
#hsj .contents_area .inner .innerBox ul li {width: 33%;height: 25.9vw;}
}

@media screen and (max-width: 1400px) {
#hsj .contents_area .inner .innerBox ul li .slide-text {height: 32%;}
#hsj .contents_area .inner .innerBox ul li p strong {font-size: 17px;}
#hsj .contents_area .inner .innerBox ul li p {padding: 20px;}
#hsj .contents_area .inner .innerBox ul li .slide-text::after {width: 16px;height: 24px;right: 20px;}
}

@media screen and (max-width: 1280px) {
#hsj .contents_area .inner .innerBox {width: 100%;}
#hsj .contents_area .inner .innerBox ul {gap: 0.6vw 0px;}
#hsj .contents_area .inner .innerBox ul li {width: 29.7vw;height: 29.7vw;}
#hsj .contents_area .inner .innerBox ul li p {font-size: 1.16vw;padding: 1.4vw;}
#hsj .contents_area .inner .innerBox ul li p strong {font-size: 1.4vw;margin: 0 0 0.8vw 0;}
}

@media screen and (max-width: 1080px) {
#hsj .contents_area .inner .innerBox ul li .slide-text::after {width: 12px;height: 20px;}
}

@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: 4.4vw;}
#hsj p {font-size: 3.4vw;}
#hsj p.caution {font-size: 2.8vw;}
#hsj hgroup p {font-size: 3.4vw;}
/* section */
#hsj .contents_area .inner .innerBox ul {gap: 0.6vw 0px;}
#hsj .contents_area .inner .innerBox ul li {width: 44.5vw;height: 44.5vw;}
#hsj .contents_area .inner .innerBox ul li p {font-size: 1.7vw;padding: 2.6vw;}
#hsj .contents_area .inner .innerBox ul li p strong {font-size: 2.0vw;margin: 0 0 1.0vw 0;}
#hsj .contents_area .inner .innerBox ul li .slide-text {transform: translateY(0%) !important;}
}

@media screen and (max-width: 512px) {
/* section */
#hsj .contents_area .inner {padding-top: 20vw;}
#hsj .contents_area .inner .innerBox ul {gap: 0.6vw 0px;}
#hsj .contents_area .inner .innerBox ul li {width: 88vw;height: 88vw;}
#hsj .contents_area .inner .innerBox ul li p {font-size: 3.2vw;padding: 4vw;}
#hsj .contents_area .inner .innerBox ul li p strong {font-size: 3.8vw;margin: 0 0 2vw 0;}
#hsj .contents_area .inner .innerBox ul li .slide-text {height: 27%;transform: translateY(0%) !important;}
	
#hsj .contents_area .inner .innerBox ul.slide-items li {opacity: 1.0;transition: 0.3s;}
#hsj .contents_area .inner .innerBox ul.slide-items li:hover {}
#hsj .contents_area .inner .innerBox .prev-arrow {margin: 0px;z-index: 101;width: 12px;position: absolute;bottom: -4vw;left: 3%;transform: translateY(-50%) translateX(-50%);cursor: pointer;filter: alpha(opacity=100);opacity: 1.0;transition: 0.3s;}
#hsj .contents_area .inner .innerBox .prev-arrow:hover {}
#hsj .contents_area .inner .innerBox .next-arrow {margin: 0px;z-index: 101;width: 12px;position: absolute;bottom: -4vw;right: 3%;transform: translateY(-50%) translateX(50%);}
#hsj .contents_area .inner .innerBox .next-arrow:hover {}
.slick-dotted.slick-slider {margin-bottom: 30px;}
/* dotsを丸くカスタマイズするCSS */
.dots-wrap {display: flex;justify-content: center !important;margin-top: 7vw !important;}
.dots-wrap li {width: 2.5vw !important;height: 2.5vw !important;margin: 0 3vw !important;background: #6c6c6c;border-radius: 50%;cursor: pointer;}
.dots-wrap li:hover,.dots-wrap li.slick-active {background: #c1060f;}
.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;box-sizing: border-box;}
#hsj .contents_area .inner_main_visual .icon {width: 26vw;bottom: -28%;}
#hsj h4 {font-size: 4.6vw;line-height: 1.7;margin: 0 0 10vw 0;}
}