@charset "UTF-8";


/* コンテンツエリア */
#hsj h2 {margin: 0 0 100px 0;padding: 0;text-align: center;position: relative;}
#hsj h2 strong {font-size: 40px;line-height: 1.3;color: #222;font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.01em;font-weight: normal !important;margin-right: 0px;display: inline-block;text-align: center;}
#hsj h2 span {display: inline-block;}
#hsj h2::after {content: "";display: block;width: 40px;height: 6px;background-color: #C00;position: absolute;bottom: -50px;left: 50%;transform: translateY(0%) translateX(-50%);}
#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;}

/* section */
#hsj .contents_area .inner .innerBox {width: 90%;max-width: 880px;margin: 100px auto 0 auto;padding: 0;}
#hsj .contents_area .inner .innerBox > div {margin: 0 0 40px 0;}
#hsj .contents_area .inner .innerBox > div.last_box {text-align: right;}
#hsj .contents_area .inner .innerBox p strong {font-size: 18px;margin-bottom: 8px;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;display: block;}
#hsj .contents_area .inner .innerBox > div.last_box p {text-align: right;}
#hsj .contents_area .inner .innerBox ul {width: 100%;margin: 16px 0;padding: 0;/*display: flex;flex-flow: row wrap;justify-content: space-between;*//*gap: 56px 0px;*/}
#hsj .contents_area .inner .innerBox ul li {width: 100%;margin: 8px 0 0 0;padding: 0;list-style: none;}

/* --- 共通設定 --- */
.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 にリセットする */
}

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


@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: 5.4vw;line-height: 1.4;}
#hsj h2::after {bottom: -8vw;}
#hsj p {font-size: 2.4vw;}
#hsj p.caution {font-size: 1.8vw;}
/* section */
#hsj .contents_area .inner .innerBox {width: 100%;margin-top: 12vw;padding: 0;}
}

@media screen and (max-width: 512px) {
#hsj p {font-size: 3.4vw;}
#hsj p.caution {font-size: 2.8vw;}
}