/* Google Fonts と tokens/reset/base/components/sections は 各 HTML の から直接 で読み込む（@import は直列DLになり描画が遅れるため） */ /* ============ LP Header ============ */ .lp-header { position: fixed; top: 0; left: 0; right: 0; height: 80px; background: transparent; z-index: 100; display: flex; align-items: center; } .lp-header__inner { max-width: var(--container-wide); margin: 0 auto; width: 100%; padding: 0 var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .lp-logo { display: flex; align-items: center; gap: var(--space-1); color: var(--c-text); font-family: var(--font-heading); font-size: var(--fs-sm); } .lp-logo__img { height: 54px; width: auto; display: block; } .lp-logo--right { margin-left: var(--space-2); } .lp-logo--right:hover { opacity: 0.8; } .lp-logo__mark { width: 28px; height: 28px; background: var(--c-primary); color: var(--c-primary-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--fs-xs); } .lp-logo__sub { display: block; font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--c-text-mute); font-family: var(--font-body); } .lp-header__cta { display: inline-flex; align-items: center; background: var(--c-text); color: #fff; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; transition: background var(--duration) var(--ease), transform var(--duration) var(--ease); } .lp-header__cta:hover { background: var(--c-secondary-dark); color: #fff; transform: translateY(-2px); } @media (max-width: 480px) { .lp-logo__sub { display: none; } .lp-logo__img { height: 44px; } } /* ============ LP Nav ============ */ .lp-nav { display: flex; align-items: center; gap: var(--space-3); margin-left: 0; margin-right: 0; } /* メニューは全サイズで「ひよこボタン → ドロップダウン」 */ .lp-nav__list { position: fixed; top: 80px; left: 0; right: 0; list-style: none; display: flex; flex-direction: column; margin: 0; background: var(--c-bg); padding: var(--space-3); gap: var(--space-1); border-bottom: 1px solid var(--c-border-soft); box-shadow: var(--shadow-card); transform: translateY(-130%); transition: transform var(--duration) var(--ease); max-height: calc(100dvh - 80px); overflow-y: auto; } .lp-nav.is-open .lp-nav__list { transform: translateY(0); } .lp-nav__link { display: block; text-align: center; padding: var(--space-2) 0; font-size: var(--fs-base); color: var(--c-text); border-bottom: 1px solid var(--c-border-soft); transition: color var(--duration) var(--ease); } .lp-nav__link:hover { color: var(--c-secondary-dark); } .lp-nav__list li:last-child .lp-nav__link { border-bottom: 0; } /* ひよこMENUボタン（公式HPの chick-menu 画像を使用） */ .lp-nav__toggle { display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; margin-left: auto; } .lp-chick-img { height: 52px; width: auto; display: block; transition: transform var(--duration) var(--ease); } .lp-nav__toggle:hover .lp-chick-img { transform: translateY(-2px) rotate(-3deg); } .lp-nav.is-open .lp-chick-img { transform: rotate(6deg) scale(1.03); } /* メニュー展開中はフローティングボタンを非表示 */ .lp-nav.is-open~.lp-floating, body:has(.lp-nav.is-open) .lp-floating { opacity: 0; pointer-events: none; } /* スムーススクロール用のオフセット */ html { scroll-behavior: smooth; scroll-padding-top: 80px; } /* ============ LP main ============ */ .lp-main { padding-top: 0; overflow: clip; } /* ============ Message section ============ */ .lp-message { padding: 40px 0 96px; background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-alt) 100%); } .lp-message__inner { max-width: 880px; margin: 0 auto; padding: 0 var(--space-3); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-5); align-items: center; } .lp-message__photo { border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 1 / 1; max-width: 320px; margin: 0 auto; } .lp-message__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .lp-message__catch { font-family: var(--font-heading); font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.5; color: var(--c-secondary-dark); margin-bottom: var(--space-3); } .lp-message__catch strong { color: var(--c-primary-dark); } .lp-message__body { font-size: var(--fs-base); line-height: 1.9; color: var(--c-text); margin-bottom: var(--space-3); } .lp-message__name { text-align: right; font-family: var(--font-heading); color: var(--c-text-mute); } @media (max-width: 720px) { .lp-message__inner { grid-template-columns: 1fr; gap: var(--space-3); } .lp-message__photo { max-width: 220px; margin: 0 auto; } } /* ============ LP Hero ============ */ .lp-hero { position: relative; min-height: 100vh; min-height: 100dvh; background: linear-gradient(135deg, var(--c-primary-light) 0%, var(--c-primary) 60%, var(--c-secondary) 100%); display: flex; align-items: center; text-align: center; overflow: hidden; } .lp-hero__bg { position: absolute; inset: 0; z-index: 0; } .lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(254, 248, 203, 0.55) 0%, rgba(254, 248, 203, 0.75) 60%, rgba(236, 251, 251, 0.85) 100%), linear-gradient(90deg, rgba(254, 248, 203, 0.45) 0%, rgba(254, 248, 203, 0.10) 100%); } .lp-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--space-8) var(--space-3); } @media (max-width: 480px) { .lp-hero__inner { padding: var(--space-5) var(--space-3); } } .lp-hero__sub { display: inline-block; background: #fff; color: var(--c-secondary-dark); padding: 0.3em 1.2em; border-radius: var(--radius-pill); font-size: var(--fs-sm); letter-spacing: 0.1em; margin-bottom: var(--space-3); font-weight: 500; } .lp-hero__catch { font-family: var(--font-heading); font-size: clamp(2rem, 6vw, 4rem); line-height: 1.4; margin-bottom: var(--space-3); } .lp-hero__catch strong { color: var(--c-secondary-dark); font-weight: 500; background: linear-gradient(transparent 65%, rgba(255, 255, 255, 0.6) 65%); padding: 0 0.1em; } .lp-hero__lead { font-size: var(--fs-md); line-height: var(--lh-loose); max-width: 640px; margin: 0 auto var(--space-5); } .lp-hero__cta { display: inline-flex; align-items: center; background: var(--c-text); color: #fff; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.05em; box-shadow: var(--shadow-card); transition: background var(--duration) var(--ease), transform var(--duration) var(--ease); } .lp-hero__cta:hover { background: var(--c-secondary-dark); color: #fff; transform: translateY(-3px); } .lp-hero__deco { position: absolute; z-index: 1; pointer-events: none; } .lp-hero__deco--1 { top: 15%; left: 5%; width: 100px; opacity: 0.8; } .lp-hero__deco--2 { top: 20%; right: 8%; width: 80px; opacity: 0.7; } .lp-hero__deco--3 { bottom: 15%; left: 10%; width: 90px; opacity: 0.7; } .lp-hero__deco--4 { bottom: 10%; right: 5%; width: 110px; opacity: 0.8; } @media (max-width: 768px) { .lp-hero__deco { width: 60px !important; } } /* ============ Floating Apply Button ============ */ .lp-floating { position: fixed; bottom: var(--space-3); right: var(--space-3); z-index: 50; background: var(--c-text); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-weight: 700; box-shadow: var(--shadow-hover); font-size: var(--fs-sm); letter-spacing: 0.04em; transition: background var(--duration) var(--ease), transform var(--duration) var(--ease); } .lp-floating:hover { background: var(--c-secondary-dark); color: #fff; transform: translateY(-3px); } @media (max-width: 480px) { .lp-floating { bottom: var(--space-2); right: var(--space-2); padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); } } /* ============ Numbers ============ */ .lp-numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } @media (max-width: 768px) { .lp-numbers { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } .lp-numbers .lp-number:nth-child(4), .lp-numbers .lp-number:nth-child(5) { grid-column: span 1; } } @media (max-width: 480px) { .lp-numbers { grid-template-columns: repeat(2, 1fr); } .lp-numbers .lp-number:nth-child(5) { grid-column: 1 / -1; } } .lp-number { background: var(--c-surface); border-radius: var(--radius); padding: var(--space-4) var(--space-2); text-align: center; box-shadow: var(--shadow-soft); } .lp-number__label { font-size: var(--fs-xs); color: var(--c-text-mute); letter-spacing: 0.08em; display: block; margin-bottom: var(--space-1); } .lp-number__value { display: block; font-family: var(--font-en); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; color: var(--c-secondary-dark); line-height: 1; } .lp-number__unit { font-size: var(--fs-base); color: var(--c-text-mute); margin-left: 2px; } /* ============ LP Merits ============ */ .lp-merits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } @media (max-width: 960px) { .lp-merits { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .lp-merits { grid-template-columns: 1fr; } } .lp-merit { background: var(--c-surface); border-radius: var(--radius); padding: var(--space-4); text-align: center; box-shadow: var(--shadow-soft); } .lp-merit__icon { width: 72px; height: 72px; margin: 0 auto var(--space-2); background: var(--c-primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-2xl); color: var(--c-primary-dark); } .lp-merit__title { font-size: var(--fs-base); margin-bottom: var(--space-1); } .lp-merit__text { font-size: var(--fs-xs); color: var(--c-text-mute); line-height: var(--lh-base); } /* ============ Staff Voice (丸並び + モーダル) ============ */ .lp-faces { list-style: none; margin: 0; padding: 0; max-width: 720px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-6); justify-items: center; } .lp-face__btn { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; background: none; border: 0; padding: 0; cursor: pointer; width: 100%; font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; } .lp-face__img { position: relative; width: 260px; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--c-primary-light); box-shadow: var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; } .lp-face__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-face__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(74, 70, 48, 0.55); color: #fff; font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 500; line-height: 1.5; letter-spacing: 0.03em; opacity: 0; transition: opacity 0.25s ease; } .lp-face__btn:hover .lp-face__overlay, .lp-face__btn:focus-visible .lp-face__overlay { opacity: 1; } .lp-face__btn:hover .lp-face__img, .lp-face__btn:focus-visible .lp-face__img { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .lp-face__name { font-size: var(--fs-base); font-weight: 500; } .lp-face__role { font-size: var(--fs-xs); color: var(--c-text-mute); letter-spacing: 0.05em; margin-top: -0.35rem; } @media (max-width: 768px) { .lp-faces { grid-template-columns: 1fr; gap: var(--space-5); max-width: 320px; } } /* --- モーダル --- */ .lp-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-3); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .lp-modal.is-open { opacity: 1; visibility: visible; } .lp-modal__overlay { position: absolute; inset: 0; background: rgba(40, 36, 20, 0.55); backdrop-filter: blur(2px); } .lp-modal__panel { position: relative; width: min(920px, 100%); max-height: 90vh; overflow-y: auto; background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); padding: var(--space-6); transform: translateY(16px); transition: transform 0.25s ease; } .lp-modal.is-open .lp-modal__panel { transform: translateY(0); } .lp-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); color: var(--c-text-mute); padding: 0.3rem 0.4rem; transition: color 0.2s ease; } .lp-modal__close:hover { color: var(--c-text); } .lp-modal__body { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items: start; } .lp-modal__photo { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--c-primary-light); box-shadow: var(--shadow-soft); } .lp-modal__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .lp-modal__head { margin-bottom: var(--space-3); } .lp-modal__role { display: inline-block; background: var(--c-accent); color: var(--c-text); font-size: var(--fs-xs); font-weight: 500; padding: 0.15em 0.8em; border-radius: var(--radius-pill); margin-bottom: 0.6rem; } .lp-modal__name { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 500; } .lp-modal__text p { font-size: var(--fs-sm); line-height: var(--lh-loose); margin-bottom: var(--space-3); } .lp-modal__text p:last-child { margin-bottom: 0; } @media (max-width: 768px) { .lp-modal__panel { padding: var(--space-6) var(--space-3) var(--space-3); } .lp-modal__body { grid-template-columns: 1fr; gap: var(--space-3); } .lp-modal__photo { width: 200px; margin: 0 auto; } } /* ============ Steps (vertical) ============ */ .lp-steps { max-width: 720px; margin: 0 auto; counter-reset: step; } .lp-step { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-3); position: relative; padding: var(--space-3) 0; } .lp-step:not(:last-child)::after { content: ''; position: absolute; left: 39px; top: 100px; bottom: -16px; width: 2px; background: var(--c-secondary-light); } .lp-step__num { counter-increment: step; width: 80px; height: 80px; border-radius: 50%; background: var(--c-secondary-dark); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 700; position: relative; z-index: 1; } .lp-step__num small { font-size: var(--fs-xs); letter-spacing: 0.1em; font-weight: 400; opacity: 0.9; } .lp-step__num::after { content: counter(step, decimal-leading-zero); font-size: var(--fs-xl); line-height: 1; } .lp-step__title { font-size: var(--fs-lg); margin-bottom: var(--space-1); } .lp-step__text { font-size: var(--fs-sm); color: var(--c-text); line-height: var(--lh-base); } @media (max-width: 480px) { .lp-step { grid-template-columns: 64px 1fr; } .lp-step__num { width: 64px; height: 64px; } .lp-step:not(:last-child)::after { left: 31px; top: 80px; } } /* ============ CTA Final ============ */ .lp-cta-final { background: linear-gradient(135deg, var(--c-secondary-dark) 0%, var(--c-primary-dark) 100%); padding: var(--space-12) 0; text-align: center; color: #fff; } .lp-cta-final h2 { font-size: var(--fs-3xl); margin-bottom: var(--space-3); color: #fff; } .lp-cta-final p { font-size: var(--fs-md); margin-bottom: var(--space-5); } .lp-cta-final .btn { background: #fff; color: var(--c-secondary-dark); padding: var(--space-3) var(--space-8); font-size: var(--fs-md); font-weight: 500; border-radius: var(--radius-pill); display: inline-block; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .lp-cta-final .btn:hover { color: var(--c-secondary-dark); transform: translateY(-3px); box-shadow: var(--shadow-hover); } /* ============ LP Footer ============ */ .lp-footer { background: var(--c-text); color: rgba(255, 255, 255, 0.85); padding: var(--space-6) 0 var(--space-3); font-size: var(--fs-sm); text-align: center; } .lp-footer a { color: var(--c-accent); } .lp-footer__name { font-family: var(--font-heading); } /* ============ 404 ============ */ .lp-404__num { font-family: var(--font-en); font-size: 6rem; color: var(--c-secondary); line-height: 1; } .lp-404__title { font-size: var(--fs-2xl); margin-bottom: var(--space-3); } .lp-footer__addr { margin: var(--space-2) 0; line-height: 1.8; font-size: var(--fs-xs); } .lp-footer__bottom { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); } /* Appear アニメーションは components.css に定義（同一内容の重複定義を削除） */ /* ============ Form (LP) ============ */ .lp-form { background: var(--c-surface); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-soft); max-width: 720px; margin: 0 auto; } .form-field { margin-bottom: var(--space-3); } .form-label { display: block; margin-bottom: var(--space-1); font-size: var(--fs-sm); font-weight: 500; } .form-label__required { display: inline-block; margin-left: 0.4em; font-size: var(--fs-xs); background: var(--c-danger); color: #fff; padding: 0.1em 0.5em; border-radius: var(--radius-sm); } .form-input, .form-select, .form-textarea { width: 100%; padding: var(--space-2); font-size: var(--fs-base); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--c-secondary); box-shadow: 0 0 0 3px var(--c-secondary-light); } .form-textarea { min-height: 140px; resize: vertical; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } /* ============ Wave Section Dividers ============ */ /* 白セクションとクリームセクションの境目を、やわらかい波線でつなぐ（公式HP準拠） */ .section--alt { position: relative; } .section--alt>.container, .section--alt>.container-narrow { position: relative; z-index: 2; } .section--alt::before, .section--alt::after { content: ''; position: absolute; left: 0; right: 0; height: 44px; z-index: 1; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; } /* 上側：ゆるやかな波（山は 約240 / 960 付近） */ .section--alt::before { top: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C120,12 240,12 360,26 S600,40 720,26 S960,12 1080,26 S1320,40 1440,26 L1440,0 L0,0 Z' fill='%23FFFEF5'/%3E%3C/svg%3E"); } /* 下側：ゆるやかな波（山は 約600 / 1320 付近、上と半ピッチずらす） */ .section--alt::after { bottom: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C120,32 240,32 360,18 S600,4 720,18 S960,32 1080,18 S1320,4 1440,18 L1440,44 L0,44 Z' fill='%23FFFEF5'/%3E%3C/svg%3E"); } /* 最後の応募セクションは下がCTA（濃色）のため、下の波線は出さない */ #apply.section--alt::after { display: none; } @media (max-width: 768px) { .section--alt::before, .section--alt::after { height: 28px; } } /* MESSAGEセクションの上下も波線にする */ /* 上：ヒーロー写真からメッセージへ（白い波が立ち上がる） */ .lp-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; z-index: 4; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C120,4 240,4 360,18 S600,32 720,18 S960,4 1080,18 S1320,32 1440,18 L1440,44 L0,44 Z' fill='%23FFFEF5'/%3E%3C/svg%3E"); } /* 下：メッセージから数字セクションへ（ゆるやかな波） */ .lp-message { position: relative; } .lp-message__inner { position: relative; z-index: 2; } .lp-message::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px; z-index: 1; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C120,32 240,32 360,18 S600,4 720,18 S960,32 1080,18 S1320,4 1440,18 L1440,44 L0,44 Z' fill='%23FFFEF5'/%3E%3C/svg%3E"); } @media (max-width: 768px) { .lp-hero::after { height: 30px; } .lp-message::after { height: 28px; } } /* ============ 募集要項：雇用形態ごとの表 ============ */ .lp-recruit { margin-bottom: var(--space-5); } .lp-recruit:last-child { margin-bottom: 0; } .lp-recruit__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .lp-recruit__type { flex-shrink: 0; background: var(--c-secondary-dark); color: #fff; font-family: var(--font-heading); font-size: var(--fs-sm); letter-spacing: 0.08em; padding: 0.35em 1.1em; border-radius: var(--radius-pill); } .lp-recruit__type--alt { background: var(--c-crayon-dark); } .lp-recruit__title { font-size: var(--fs-lg); margin: 0; } .lp-recruit__note { display: inline-block; margin-top: 0.3em; font-size: var(--fs-sm); color: var(--c-text-mute); } .lp-recruit__cta { text-align: center; margin-top: var(--space-3); } /* 雇用形態のグループ見出し */ .lp-recruit-group { margin-bottom: var(--space-5); } .lp-recruit-group:last-of-type { margin-bottom: 0; } .lp-recruit-group__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xl); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--c-secondary-dark); } .lp-recruit-group__title::before { content: ''; width: 14px; height: 28px; border-radius: var(--radius-pill); background: var(--c-secondary-dark); } .lp-recruit__intro { text-align: center; color: var(--c-text-mute); font-size: var(--fs-sm); margin: 0 0 var(--space-5); line-height: 1.7; } .lp-recruit__note-box { background: var(--c-primary-light); border-radius: var(--radius-lg); padding: var(--space-3); font-size: var(--fs-sm); color: var(--c-text); margin-top: var(--space-3); } .lp-apply-btn { display: inline-flex; align-items: center; gap: 0.3em; background: var(--c-text); color: #fff; font-weight: 700; font-size: var(--fs-base); letter-spacing: 0.04em; padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); box-shadow: var(--shadow-soft); transition: background var(--duration) var(--ease), transform var(--duration) var(--ease); } .lp-apply-btn:hover { background: var(--c-secondary-dark); color: #fff; transform: translateY(-2px); } /* ============ 改行制御（スマホ） ============ */ /* 語句が行をまたいで分断されるのを防ぐ */ .nb { white-space: nowrap; } /* スマホでのみ改行する（PC・タブレットでは無視される） */ .br-sp { display: none; } @media (max-width: 480px) { .br-sp { display: inline; } } /* 小書き仮名・長音記号が行頭に落ちないよう禁則処理を強める */ html { line-break: strict; } /* 見出し・短いリード文は文節単位で折り返す */ h1, h2, h3, h4, .section-head__lead, .lp-recruit__intro, .lp-merit__text, .timeline__text, .lp-step__text, .accordion summary, .table th, .table td { word-break: auto-phrase; } /* テーブルは列幅が内容の最小幅に引きずられないようにする */ .table th, .table td { overflow-wrap: anywhere; } /* 最終CTAの見出しを2行に収める */ @media (max-width: 480px) { .lp-cta-final h2 { font-size: 1.75rem; } }