@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: 160px 0 0 0;padding: 0;}
#hsj .contents_area .inner .innerBox h3 {font-size: 28px;line-height: 1.4;margin: 100px 0 30px 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 .contents_area .inner .innerBox h4 {font-size: 48px;line-height: 1.4;color: #000;font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.03em;font-weight: normal !important;display: inline-block;}
#hsj .contents_area .inner .innerBox ul.value {width: 100%;margin: 0;padding: 0;display: flex;flex-flow: row wrap;justify-content: space-between;}
#hsj .contents_area .inner .innerBox ul.value li {width: 31%;margin: 0;padding: 32px 24px;box-sizing: border-box;/*border: solid 4px #f8f8f8;*/border-radius: 8px;list-style: none;box-shadow: 8px 8px 0px 0px rgba(235, 235, 235, 1);border: solid 4px #eee;}
#hsj .contents_area .inner .innerBox ul.value li p {font-size: 18px;line-height: 1.7;color: #555;}
#hsj .contents_area .inner .innerBox ul.value li p strong {font-size: 36px;line-height: 1.3;color: #000;margin: 0 0 24px 0;font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;display: block;text-align: center;}
#hsj .contents_area .inner .innerBox ul.value li p strong span.small {/*font-size: 22px;position: relative;bottom: -2px;*/}
#hsj .contents_area .inner .innerBox ul.value li p strong span.red {color: #C00;}

#hsj .contents_area .inner .innerBox ul.req {width: 100%;margin: 0;padding: 0;display: flex;flex-flow: row wrap;justify-content: space-between;}
#hsj .contents_area .inner .innerBox ul.req li {width: 100%;margin: 15px 0;padding: 0 0 30px 0;box-sizing: border-box;border-bottom: solid 3px #f8f8f8;/*border-radius: 10px;*/list-style: none;}
/*
#hsj .contents_area .inner .innerBox ul.req li p {font-size: 32px;line-height: 1.5;color: #000;margin: 0;font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;display: block;position: relative;}
#hsj .contents_area .inner .innerBox ul.req li p span {width: 100px;font-size: 22px;color: #FFF;background-color: #C00;padding: 16px 24px;font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;text-align: center;display: inline-block;position: absolute;top: 50%;left: 0;transform: translateY(-50%) translateX(0%);border-radius: 8px;}
*/

#hsj .contents_area .inner .innerBox ul.req li .inner {width: 100%;margin: 0;padding: 0;display: flex;flex-flow: row wrap;justify-content: flex-start;gap: 3%;}
#hsj .contents_area .inner .innerBox ul.req li .inner p {width: auto;font-size: 32px;line-height: 1.5;color: #000;margin: 0;font-family: 'HondaGlobalFontJP-Bold', sans-serif !important;display: block;position: relative;transition:all 0.5s;}
#hsj .contents_area .inner .innerBox ul.req li .inner p:nth-child(1) {width: 13%;height: 68px;font-size: 22px;color: #FFF;background-color: #C00;padding: 0;text-align: center;border-radius: 8px;box-sizing: border-box;}
#hsj .contents_area .inner .innerBox ul.req li .inner p:nth-child(2) {width: 82%;}
#hsj .contents_area .inner .innerBox ul.req li .inner p span {width: 100%;position: absolute;top: 50%;left: 0;transform: translateY(-50%) translateX(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 にリセットする */
}


@media screen and (max-width: 1600px) {
#hsj .contents_area .inner .innerBox ul.value li p strong span.red {display: block;}
}

@media screen and (max-width: 1280px) {
#hsj h2 span {margin-top: 30px;}
#hsj .contents_area .inner .innerBox ul.req li .inner p:nth-child(1) {width: 15%;}
#hsj .contents_area .inner .innerBox ul.req li .inner p:nth-child(2) {width: 80%;}
}

@media screen and (max-width: 1120px) {
#hsj .contents_area .inner .innerBox ul.req li .inner p:nth-child(1) {height: 84px;}
}

@media screen and (max-width: 980px) {
#hsj .contents_area .inner .innerBox ul.value li p strong {font-size: 32px;line-height: 1.4;}
}
@media screen and (max-width: 880px) {
#hsj .contents_area .inner .innerBox ul.value li p strong {font-size: 28px;}
}

@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: 20vw;padding: 0;}
#hsj .contents_area .inner .innerBox h3 {font-size: 3.4vw;margin: 12vw 0 4vw 0;}
#hsj .contents_area .inner .innerBox h4 {font-size: 5.8vw;}
#hsj .contents_area .inner .innerBox ul.value {gap: 4vw 0;}
#hsj .contents_area .inner .innerBox ul.value li {width: 100%;padding: 4vw;}
#hsj .contents_area .inner .innerBox ul.value li p {font-size: 2.1vw;text-align: center;}
#hsj .contents_area .inner .innerBox ul.value li p strong {font-size: 4.4vw;margin: 0 0 3vw 0;}
#hsj .contents_area .inner .innerBox ul.value li p strong span.red {display: inline-block;}
#hsj .contents_area .inner .innerBox ul.value li p span.br {/*display: inline-block;*/}

#hsj .contents_area .inner .innerBox ul.req li {width: 100%;margin: 15px 0;padding: 0 0 30px 0;}
/*	
#hsj .contents_area .inner .innerBox ul.req li p {font-size: 4.0vw;padding-left: 1.15em;text-indent: -1.15em;}
#hsj .contents_area .inner .innerBox ul.req li p span {font-size: 2.8vw;margin-right: 2vw;top: -0.5vw;position: relative;}
*/
#hsj .contents_area .inner .innerBox ul.req li .inner {gap: 5%;}
#hsj .contents_area .inner .innerBox ul.req li .inner p {font-size: 4.0vw;}
#hsj .contents_area .inner .innerBox ul.req li .inner p:nth-child(1) {width: 20%;height: 11vw;font-size: 2.8vw;}
#hsj .contents_area .inner .innerBox ul.req li .inner p:nth-child(2) {width: 74%;}
}

@media screen and (max-width: 512px) {
#hsj #sec03.contents_area .inner .innerBox h3 {margin: 12vw 0 4vw 0;}
#hsj .contents_area .inner .innerBox h3 {font-size: 4.0vw;}
#hsj .contents_area .inner .innerBox h4 {font-size: 6.0vw;}
#hsj .contents_area .inner .innerBox ul.value {gap: 5vw 0;}
#hsj .contents_area .inner .innerBox ul.value li {padding: 5vw;}
#hsj .contents_area .inner .innerBox ul.value li p {font-size: 3.2vw;}
#hsj .contents_area .inner .innerBox ul.value li p strong {font-size: 5.4vw;margin: 0 0 3vw 0;}
#hsj .contents_area .inner .innerBox ul.value li p span.br {display: inline-block;}
#hsj .contents_area .inner .innerBox ul.req {margin-bottom: 10vw;}
#hsj .contents_area .inner .innerBox ul.req li {padding: 0 0 5vw 0;margin: 2.5vw 0;}
#hsj .contents_area .inner .innerBox ul.req li .inner p {font-size: 4.4vw;}
#hsj .contents_area .inner .innerBox ul.req li .inner p:nth-child(1) {width: 24%;height: 12vw;font-size: 3.6vw;}
#hsj .contents_area .inner .innerBox ul.req li .inner p:nth-child(2) {width: 70%;}
}

@media screen and (max-width: 414px) {
#hsj .contents_area .inner .innerBox ul.value li p {font-size: 3.6vw;}
#hsj .contents_area .inner .innerBox ul.value li p strong {font-size: 5.8vw;}
#hsj .contents_area .inner .innerBox ul.req li {padding: 0 0 4vw 0;margin: 2vw 0;}
#hsj .contents_area .inner .innerBox ul.req {margin-bottom: 15vw;}

}