html {
font-size: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--header-height-pc, 72px);
}
@media (max-width: 767px) {
html { scroll-padding-top: var(--header-height-sp, 56px); }
}
body {
font-family: var(--ff-jp);
font-size: var(--fs-jp-16);
font-weight: var(--fw-regular);
line-height: 1.7;
color: var(--color-text);
background-color: var(--color-white);
font-feature-settings: "palt";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
body.is-modal-locked,
html.is-modal-locked,
body.is-menu-open,
html.is-menu-open {
overflow: hidden;
}
a {
color: inherit;
transition: opacity var(--transition-base);
}
a:hover { opacity: 0.7; }
h1, h2, h3, h4, h5, h6 {
font-weight: var(--fw-bold);
line-height: 1.4;
}
/* ============ Container ============ */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad-pc);
}
@media (max-width: 767px) {
.container { padding-inline: var(--container-pad-sp); }
}
/* ============ Responsive helpers ============ */
.view-pc { display: block; }
.view-tb,
.view-sp { display: none; }
@media (max-width: 1199px) {
.view-pc { display: none; }
.view-tb { display: block; }
}
@media (max-width: 767px) {
.view-tb { display: none; }
.view-sp { display: block; }
}
/* ============ Visually hidden（A11y） ============ */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ============ Placeholder（雛形ページ用、Phase B以降で各ページCSSに差し替え） ============ */
.placeholder {
min-height: 60vh;
padding: 120px 0 80px;
display: flex;
align-items: center;
}
.placeholder__crumb {
font-family: var(--ff-en-display);
font-size: var(--fs-en-14);
font-weight: var(--fw-bold);
letter-spacing: 0.12em;
color: var(--color-blue-dark);
margin-bottom: 8px;
}
.placeholder__title {
font-size: var(--fs-jp-32);
color: var(--color-blue-deepest);
margin-bottom: 16px;
letter-spacing: 0.05em;
}
.placeholder__desc {
font-size: var(--fs-jp-16);
max-width: 720px;
margin-bottom: 24px;
}
.placeholder__note {
font-size: var(--fs-jp-14);
color: var(--color-dark-gray);
}
@media (max-width: 767px) {
.placeholder { padding: 96px 0 64px; }
.placeholder__title { font-size: var(--fs-jp-24); }
}
/* ============ Scroll Reveal ============
HTMLパース時点から非表示にするため、html.js-anim 配下で対象セレクタを初期非表示。
内インラインスクリプトで documentElement に .js-anim を付与する。
main.js が .is-revealed を付与すると表示。 */
html.js-anim .hero,
html.js-anim section,
html.js-anim .person-card,
html.js-anim .training-voice,
html.js-anim .training-list__group,
html.js-anim .training-step__col,
html.js-anim .training-compare__col,
html.js-anim .training-sub__item,
html.js-anim .business__row,
html.js-anim .strongs-block,
html.js-anim .pdetail-article__block,
html.js-anim .pdetail-future__col,
html.js-anim .qa-block,
html.js-anim .info-flow__item,
html.js-anim .info-recruit__panel,
html.js-anim .info-index__btn,
html.js-anim .survey-q,
html.js-anim .page-next__card {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
will-change: opacity, transform;
}
html.js-anim .is-revealed {
opacity: 1;
transform: translateY(0);
}
/* ファーストビュー (Hero) は fade-up 対象から除外して即時表示 (白飛び防止) */
html.js-anim .hero,
html.js-anim .intern-hero,
html.js-anim .pdetail-hero,
html.js-anim main > section:first-of-type {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
html.js-anim .hero,
html.js-anim section,
html.js-anim .person-card,
html.js-anim .training-voice,
html.js-anim .training-list__group,
html.js-anim .training-step__col,
html.js-anim .training-compare__col,
html.js-anim .training-sub__item,
html.js-anim .business__row,
html.js-anim .strongs-block,
html.js-anim .pdetail-article__block,
html.js-anim .pdetail-future__col,
html.js-anim .qa-block,
html.js-anim .info-flow__item,
html.js-anim .info-recruit__panel,
html.js-anim .info-index__btn,
html.js-anim .survey-q,
html.js-anim .page-next__card { opacity: 1; transform: none; transition: none; }
}