@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: 30px;line-height: 1.5;margin: 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 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: 24px;line-height: 1.7;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;}


/* section */
#hsj .contents_area .inner .innerBox {width: 100%;margin: 100px 0 0 0;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: 56px 0px;*/}
#hsj .contents_area .inner .innerBox ul li {width: 47.5%;margin: 0 0 80px 0;padding: 0;list-style: none;}
#hsj .contents_area .inner .innerBox ul li p {margin-top: 24px;}
#hsj .contents_area .inner .innerBox ul li p strong {font-size: 20px;line-height: 1.1;color: #C00;margin: 0 0 16px 0;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;display: block;}

#hsj #sec01.contents_area .inner .innerBox ul li:nth-child(3),
#hsj #sec01.contents_area .inner .innerBox ul li:nth-child(4) {margin-bottom: 0;}

#hsj #sec02.contents_area {background-color: #f8f8f8;}
#hsj #sec02.contents_area .inner .innerBox ul li:nth-child(9),
#hsj #sec02.contents_area .inner .innerBox ul li:nth-child(10) {margin-bottom: 0;}


#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(1),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(4),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(7),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(10),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(13) {width: 100%;margin-bottom: 40px;}
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(16),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(17),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(18) {width: 31%;margin-bottom: 0;}


/* --- 共通設定 --- */
.js-fade-in {
  opacity: 0;
  transition: opacity 1.0s ease, transform 1.0s ease;
}

/* --- ① パターン別の初期状態（必ず .is-show より上に書く） --- */
/* 下から上（20px下に配置しておく） */
.js-fade-in.up {
  transform: translateY(20px);
}

/* 左から右（20px左に配置しておく） */
.js-fade-in.left-to-right {
  transform: translateX(-20px);
}

/* その場でじわっと（位置は動かさない） */
.js-fade-in.fade {
  /* 位置の移動はなし */
}


/* --- ② 画面に入ったときに共通で付与されるクラス（一番下に書く） --- */
.js-fade-in.is-show {
  opacity: 1;
  transform: translateY(0) translateX(0); /* ここで位置を 0 にリセットする */
}


#sec01 {scroll-margin-top: 140px;}
@media screen and (max-width: 834px) {
#sec01 {scroll-margin-top: 74px;}
}


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

}

@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: 4.4vw;}
#hsj p {font-size: 3.4vw;}
#hsj p.caution {font-size: 2.8vw;}
#hsj hgroup p {font-size: 4.4vw;}
/* section */
#hsj .contents_area .inner .innerBox {width: 100%;margin-top: 12vw;padding: 0;}
#hsj .contents_area .inner .innerBox ul li {width: 100%;margin: 0 0 10vw 0;}
#hsj .contents_area .inner .innerBox ul li p {margin-top: 5vw;}
#hsj .contents_area .inner .innerBox ul li p strong {font-size: 3.8vw;margin-bottom: 3vw;}
#hsj #sec01.contents_area .inner .innerBox ul li:nth-child(3),
#hsj #sec01.contents_area .inner .innerBox ul li:nth-child(4) {margin-bottom: 10vw;}	
#hsj #sec02.contents_area .inner .innerBox ul li:nth-child(9),
#hsj #sec02.contents_area .inner .innerBox ul li:nth-child(10) {margin-bottom: 10vw;}
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(1),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(4),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(7),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(10),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(13),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(16),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(17),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(18) {width: 100%;margin-bottom: 10vw;}
#hsj #sec01.contents_area .inner .innerBox ul li:last-child {margin-bottom: 0;}
#hsj #sec02.contents_area .inner .innerBox ul li:last-child {margin-bottom: 0;}
#hsj #sec03.contents_area .inner .innerBox ul li:last-child {margin-bottom: 0;}
}

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

#hsj #sec03.contents_area .inner .innerBox h3 {margin: 12vw 0 4vw 0;}
	
#hsj #sec01.contents_area .inner .innerBox ul li:nth-child(3),
#hsj #sec01.contents_area .inner .innerBox ul li:nth-child(4) {margin-bottom: 0;}	
#hsj #sec02.contents_area .inner .innerBox ul li:nth-child(9),
#hsj #sec02.contents_area .inner .innerBox ul li:nth-child(10) {margin-bottom: 0;}
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(1),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(4),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(7),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(10),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(13),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(16),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(17),
#hsj #sec03.contents_area .inner .innerBox ul li:nth-child(18) {margin-bottom: 0;}
	
#hsj .contents_area .inner .innerBox .slide-items li {filter: alpha(opacity=100);opacity: 1.0;transition: 0.3s;}
#hsj .contents_area .inner .innerBox .prev-arrow {margin: 0px;z-index: 101;width: 2.5vw;position: absolute;bottom: -4px;left: 25vw;transform: translateY(0%) translateX(-50%);cursor: pointer;filter: alpha(opacity=100);opacity: 1.0;transition: 0.3s;}
#hsj .contents_area .inner .innerBox .next-arrow {margin: 0px;z-index: 101;width: 2.5vw;position: absolute;bottom: -4px;right: 25vw;transform: translateY(0%) translateX(50%);}

#hsj #sec02.contents_area .inner .innerBox .prev-arrow {left: 2vw;}
#hsj #sec02.contents_area .inner .innerBox .next-arrow {right: 2vw;}
	
#hsj #sec03.contents_area .inner .innerBox .slide-items.two-piece .prev-arrow {left: 30vw;}
#hsj #sec03.contents_area .inner .innerBox .slide-items.two-piece .next-arrow {right: 30vw;}
#hsj #sec03.contents_area .inner .innerBox .slide-items.five-piece .prev-arrow {left: 20vw;}
#hsj #sec03.contents_area .inner .innerBox .slide-items.five-piece .next-arrow {right: 20vw;}
	
	Four Piece
	
	
	
.slick-dotted.slick-slider {margin-bottom: 20px;}
/* dotsを丸くカスタマイズするCSS */
#hsj .contents_area .inner .innerBox .dots-wrap {display: flex;justify-content: center;margin-top: 40px !important;}
#hsj .contents_area .inner .innerBox .dots-wrap li {width: 2.5vw !important;height: 2.5vw !important;margin: 0 2.5vw !important;background: #CCC;border-radius: 50%;cursor: pointer;}
#hsj .contents_area .inner .innerBox .dots-wrap li:hover,#hsj .contents_area .inner .innerBox .dots-wrap li.slick-active {background: #C00;}
#hsj .contents_area .inner .innerBox .dots-wrap li button {display: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: none;padding: 0;border: none;background-color: transparent;}
/* スライド間の余白を設定 */
#hsj .contents_area .inner .innerBox .slide-items .slick-slide {padding: 0;margin: 0 8px;box-sizing: border-box;}
/* 左右の余白分を相殺して全体を中央に */
#hsj .contents_area .inner .innerBox .slide-items .slick-list {margin: 0 -8px;}
#hsj .contents_area .inner .innerBox .slide-items {display: none;}
#hsj .contents_area .inner .innerBox .slide-items.slick-initialized {display: block;}

}