@charset "utf-8"; /* ========================================================================== 北海道STS株式会社 ウェブサイト ブランドカラーは社章の緑 #64aa31 を基準にしています。 ========================================================================== */ /* Webフォントは各HTMLの で読み込みます（@import だとCSS取得後に ダウンロードが始まり、表示中に書体が入れ替わってレイアウトがずれるため）。 */ /* Webフォントが届くまでの間に使う代替フォント。 そのままだと本来の書体より字幅が約1.5%狭く、差し替わる瞬間に ページが縦に17pxずれる（実測）。size-adjust で字幅を合わせ、 代替フォント表示時と本番表示時のレイアウトを一致させている。 ※ 数値は Windows の游ゴシックを基準に実測して決定 */ @font-face { font-family: "JPFallback"; src: local("Yu Gothic Medium"), local("YuGothic"), local("Yu Gothic"), local("Hiragino Kaku Gothic ProN"), local("Meiryo"); size-adjust: 101.5%; } /* -------------------------------------------------------------------------- 1. 変数 -------------------------------------------------------------------------- */ :root { --green: #64aa31; /* 社章の緑 */ --green-d: #4c8524; --green-dd: #33601a; --green-pale: #eef5e7; --green-line: #cfe2bd; --ink: #232a24; --ink-2: #4b554a; --gray: #7c857a; --line: #dfe3dc; --paper: #ffffff; --paper-2: #f5f7f3; --paper-3: #ecefe8; --gothic: "Zen Kaku Gothic New", "Noto Sans JP", "JPFallback", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; --body: "Noto Sans JP", "JPFallback", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; --wrap: 1120px; --gutter: clamp(20px, 5vw, 48px); --header-h: 84px; --ease: cubic-bezier(.25, .6, .3, 1); } /* -------------------------------------------------------------------------- 2. ベース -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { min-height: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); -webkit-text-size-adjust: 100%; /* ページごとのスクロールバーの有無で横幅がずれないようにする */ scrollbar-gutter: stable; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--body); font-weight: 500; font-size: 15px; line-height: 1.85; color: var(--ink); background: var(--paper); font-feature-settings: "palt" 1; overflow-wrap: break-word; } img, svg, iframe { max-width: 100%; vertical-align: middle; border: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0 0 1.3em; } p:last-child { margin-bottom: 0; } table { border-collapse: collapse; width: 100%; } a { color: var(--green-d); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--green); } h1, h2, h3, h4 { margin: 0; font-family: var(--gothic); font-weight: 700; line-height: 1.55; } ::selection { background: var(--green); color: #fff; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: clamp(42px, 4.4vw, 64px); } .tint { background: var(--paper-2); } /* -------------------------------------------------------------------------- 3. 見出し -------------------------------------------------------------------------- */ .shead { margin-bottom: 28px; } .shead h2, .shead h1 { position: relative; padding-bottom: 13px; font-size: clamp(21px, 2.5vw, 27px); letter-spacing: .04em; } .shead h2::after, .shead h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--green); } .shead__en { margin: 11px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--gray); } .shead__lead { margin: 15px 0 0; max-width: 48em; font-size: 14.5px; color: var(--ink-2); } .shead--center { text-align: center; } .shead--center h2::after { left: 50%; transform: translateX(-50%); } /* -------------------------------------------------------------------------- 4. ボタン -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; font-family: var(--gothic); font-size: 14px; font-weight: 600; letter-spacing: .04em; border-radius: 3px; border: 1px solid var(--green); background: var(--green); color: #fff; transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); } .btn:hover { background: var(--green-d); border-color: var(--green-d); color: #fff; } .btn::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .22s var(--ease); } .btn:hover::after { transform: rotate(45deg) translate(2px, -2px); } .btn--line { background: #fff; color: var(--ink); border-color: var(--line); } .btn--line:hover { background: var(--green); border-color: var(--green); color: #fff; } .btn--wh { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .btn--wh:hover { background: #fff; border-color: #fff; color: var(--green-dd); } /* -------------------------------------------------------------------------- 5. ヘッダー -------------------------------------------------------------------------- */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--line); } .header__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 20px; } .logo { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink); } .logo__mark { height: 42px; width: auto; flex: none; } .logo__text { display: flex; flex-direction: column; line-height: 1.2; } .logo__ja { font-family: var(--gothic); font-size: 16px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; } .logo__en { margin-top: 2px; font-size: 9.5px; font-weight: 600; letter-spacing: .07em; color: var(--gray); white-space: nowrap; } .logo:hover .logo__ja { color: var(--green-dd); } .nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; } .nav__link { position: relative; flex: none; padding: 8px 11px; font-family: var(--gothic); font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--ink); white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease); } .nav__link:hover { color: var(--green-d); } .nav__link:hover::after, .nav__link[aria-current]::after { transform: scaleX(1); } .nav__link[aria-current] { color: var(--green-d); } .header__cta { flex: none; margin-left: 10px; padding: 11px 20px; white-space: nowrap; font-family: var(--gothic); font-size: 13.5px; font-weight: 600; color: #fff; background: var(--green); border-radius: 3px; transition: background .22s var(--ease); } .header__cta:hover { background: var(--green-d); color: #fff; } .burger { display: none; position: relative; z-index: 2; width: 42px; height: 42px; padding: 0; background: none; border: 0; cursor: pointer; } .burger span { position: absolute; left: 10px; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .28s var(--ease), opacity .18s var(--ease), background .2s; } .burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 27px; } .burger.is-open span { background: #fff; } .burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* -------------------------------------------------------------------------- 6. トップ ヒーロー -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; min-height: 380px; display: flex; align-items: center; margin-top: var(--header-h); padding-block: clamp(34px, 3.4vw, 46px); color: #fff; background: linear-gradient(90deg, rgba(23, 70, 34, .78) 0%, rgba(28, 91, 42, .58) 50%, rgba(70, 143, 53, .22) 100%), url("../Images/hero-medical-v1.jpg") center right / cover no-repeat; } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__inner { position: relative; z-index: 1; width: 100%; pointer-events: none; } .hero__inner a { pointer-events: auto; } .hero__title { font-family: var(--body); font-size: clamp(27px, 4.2vw, 45px); font-weight: 700; line-height: 1.42; letter-spacing: .045em; text-shadow: 0 2px 18px rgba(0, 0, 0, .28); } main { flex: 1 0 auto; } .hero__title small { display: block; margin-bottom: 14px; font-size: clamp(12px, 1.3vw, 14px); font-weight: 600; letter-spacing: .16em; color: rgba(255, 255, 255, .82); } .hero__lead { max-width: 32em; margin-top: 18px; font-size: 14.5px; line-height: 1.95; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 10px rgba(0, 0, 0, .22); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* -------------------------------------------------------------------------- 7. 下層ページ 見出し帯 / パンくず -------------------------------------------------------------------------- */ .page-head { margin-top: var(--header-h); padding-block: 30px; color: #fff; /* トップページと同じ画像を敷き、黄緑のグラデーションを重ねて色味を揃える。 透過率は白文字のコントラスト比が4.5:1を下回らない範囲で決定（実測5.18:1）。 */ background: linear-gradient(112deg, rgba(47, 92, 30, .86) 0%, rgba(74, 133, 36, .80) 58%, rgba(100, 170, 49, .68) 100%), url("../Images/hero-medical-v1.jpg") center / cover no-repeat; } .page-head h1, .page-head__en { text-shadow: 0 1px 8px rgba(0, 0, 0, .25); } .page-head h1 { font-size: clamp(21px, 2.7vw, 29px); font-weight: 700; letter-spacing: .05em; } .page-head__en { margin: 5px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .75); } .breadcrumb { border-bottom: 1px solid var(--line); background: #fff; } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; padding: 9px 0; font-size: 12px; color: var(--gray); } .breadcrumb li + li::before { content: "＞"; margin: 0 8px; color: var(--line); } .breadcrumb a { color: var(--gray); } .breadcrumb a:hover { color: var(--green-d); } .breadcrumb [aria-current] { color: var(--ink); } .breadcrumb + section { padding-top: clamp(30px, 3vw, 44px); } /* -------------------------------------------------------------------------- 8. お知らせ -------------------------------------------------------------------------- */ .news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .news-list { border-top: 1px solid var(--line); } .news-row { display: grid; grid-template-columns: 116px 1fr; gap: 2px 20px; align-items: baseline; padding: 13px 2px; border-bottom: 1px solid var(--line); } .news-row__date { font-size: 13px; font-weight: 600; color: var(--gray); letter-spacing: .02em; } .news-row__body { font-size: 14.5px; line-height: 1.8; } .news-row__body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green-line); text-underline-offset: 4px; } .news-row__body a:hover { color: var(--green-d); text-decoration-color: var(--green); } /* -------------------------------------------------------------------------- 9. 事業カード -------------------------------------------------------------------------- */ .biz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; } .biz { padding: 24px 24px 26px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 3px; box-shadow: 0 1px 3px rgba(35, 42, 36, .04); transition: box-shadow .25s var(--ease), transform .25s var(--ease); } .biz:hover { box-shadow: 0 6px 20px rgba(35, 42, 36, .10); transform: translateY(-2px); } .biz h3 { margin-bottom: 10px; font-size: 17px; line-height: 1.55; color: var(--green-dd); } .biz p { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; } .biz ul { margin-top: 12px; } .biz li { position: relative; padding-left: 15px; margin-bottom: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; } .biz li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--green-line); } /* -------------------------------------------------------------------------- 10. 研究開発 -------------------------------------------------------------------------- */ .rd-partner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px; margin-bottom: 22px; background: var(--green-pale); border-left: 4px solid var(--green); border-radius: 0 3px 3px 0; } .rd-partner b { font-family: var(--gothic); font-size: 16px; color: var(--green-dd); } .rd-partner span { font-size: 12.5px; color: var(--ink-2); } .rd-list { counter-reset: rd; border-top: 1px solid var(--line); } .rd-row { counter-increment: rd; display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding: 15px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.8; } .rd-row::before { content: counter(rd); font-family: var(--gothic); font-size: 15px; font-weight: 700; color: var(--green); text-align: center; } /* -------------------------------------------------------------------------- 11. サービス -------------------------------------------------------------------------- */ .svc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } .svc-row { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); transition: border-color .22s var(--ease), background .22s var(--ease); } .svc-row:hover { border-color: var(--green); background: var(--green-pale); color: var(--green-dd); } .svc-row__name { flex: 1; font-family: var(--gothic); font-size: 15.5px; font-weight: 600; } .svc-row__ext { flex: none; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 2px; position: relative; opacity: .5; } .svc-row__ext::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%); } .svc-note { margin-top: 18px; font-size: 12.5px; color: var(--gray); } /* -------------------------------------------------------------------------- 12. 表（会社概要・アクセス） -------------------------------------------------------------------------- */ .tbl { border: 1px solid var(--line); font-size: 14.5px; } .tbl th, .tbl td { padding: 13px 18px; border: 1px solid var(--line); text-align: left; vertical-align: top; } .tbl th { width: 200px; font-family: var(--gothic); font-weight: 600; color: var(--green-dd); background: var(--paper-2); } .tbl td small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--gray); } .notice { margin-top: 16px; padding: 12px 16px; font-size: 13px; color: #b03a1e; background: #fdf2ee; border-left: 3px solid #d1553a; } .map { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .map iframe { display: block; width: 100%; height: 320px; } /* -------------------------------------------------------------------------- 13. 沿革 -------------------------------------------------------------------------- */ .tl { border-top: 1px solid var(--line); } .tl__row { display: grid; grid-template-columns: 120px 1fr; gap: 4px 24px; padding: 15px 2px; border-bottom: 1px solid var(--line); } .tl__year { font-family: var(--gothic); font-size: 14px; font-weight: 700; color: var(--green-d); letter-spacing: .02em; } .tl__body { font-size: 14.5px; line-height: 1.8; } .tl__body b { display: block; margin-bottom: 2px; font-family: var(--gothic); font-size: 15px; color: var(--ink); } /* -------------------------------------------------------------------------- 14. 本文（個人情報保護方針など） -------------------------------------------------------------------------- */ .doc { max-width: 840px; } .doc > * + * { margin-top: 1.1em; } .doc h2 { margin-top: 1.9em; padding: 8px 0 8px 14px; font-size: 17px; border-left: 4px solid var(--green); background: var(--paper-2); } .doc h2:first-child { margin-top: 0; } .doc p { font-size: 14.5px; line-height: 1.95; margin: 0; } .doc ol { counter-reset: doc; } .doc ol > li { counter-increment: doc; position: relative; padding-left: 32px; margin-bottom: 9px; font-size: 14.5px; line-height: 1.85; } .doc ol > li::before { content: "(" counter(doc) ")"; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--green-d); } .doc ul > li { position: relative; padding-left: 18px; margin-bottom: 7px; font-size: 14px; line-height: 1.8; color: var(--ink-2); } .doc ul > li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--green-line); } .doc li > ul, .doc li > ol { margin-top: 9px; } .doc .note { padding: 14px 18px; font-size: 13.5px; color: var(--ink-2); background: var(--paper-2); border-left: 3px solid var(--green-line); } /* -------------------------------------------------------------------------- 15. ページ導線カード -------------------------------------------------------------------------- */ .navcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .navcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); transition: border-color .22s var(--ease), background .22s var(--ease); } .navcard:hover { border-color: var(--green); background: var(--green-pale); color: var(--green-dd); } .navcard__t { align-self: flex-start; font-family: var(--gothic); font-size: 15.5px; font-weight: 600; } .navcard__d { display: block; margin-top: 3px; font-size: 12px; color: var(--gray); font-weight: 400; } .navcard::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 1.5px solid var(--green); border-right: 1.5px solid var(--green); transform: rotate(45deg); } .related { border-top: 1px solid var(--line); } .related__t { margin-bottom: 16px; font-family: var(--gothic); font-size: 15px; font-weight: 700; } /* -------------------------------------------------------------------------- 16. サイトマップ -------------------------------------------------------------------------- */ .sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; } .sitemap h2 { margin-bottom: 12px; padding-bottom: 8px; font-size: 15px; border-bottom: 2px solid var(--green); } .sitemap li { margin-bottom: 9px; } .sitemap li a { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink); } .sitemap li a::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid var(--green); border-right: 1.5px solid var(--green); transform: rotate(45deg); flex: none; } .sitemap li a:hover { color: var(--green-d); } /* -------------------------------------------------------------------------- 17. フッター -------------------------------------------------------------------------- */ .footer { flex: none; background: var(--paper-2); border-top: 3px solid var(--green); } .footer__top { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(30px, 3.4vw, 44px) 0; } .footer__logo { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink); } .footer__logo .logo__mark { height: 54px; } .footer__logo .logo__ja { font-size: 21px; } .footer__addr { margin-top: 14px; font-size: 13px; line-height: 1.9; font-style: normal; color: var(--ink-2); } .footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 22px; } .footer__nav h4 { margin-bottom: 10px; padding-bottom: 6px; font-size: 13px; color: var(--green-dd); border-bottom: 1px solid var(--line); } .footer__nav li { margin-bottom: 7px; font-size: 13px; } .footer__nav a { color: var(--ink-2); } .footer__nav a:hover { color: var(--green-d); } .footer__affil { padding: 14px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--gray); } .footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; padding: 12px 0 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--gray); } .footer__bottom a { color: var(--gray); } .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 44px; height: 44px; display: grid; place-items: center; background: var(--green); color: #fff; border-radius: 3px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease), background .2s var(--ease); } .to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--green-d); color: #fff; } .to-top::before { content: ""; width: 9px; height: 9px; margin-top: 3px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); } /* -------------------------------------------------------------------------- 17b. お問い合わせフォーム -------------------------------------------------------------------------- */ .form-lead { margin-bottom: 22px; font-size: 14.5px; } .form-lead strong { color: var(--green-dd); } .form { border: 1px solid var(--line); border-bottom: 0; } .form__row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--line); } .form__label { display: flex; align-items: flex-start; gap: 8px; padding: 20px 18px; background: var(--paper-2); border-right: 1px solid var(--line); font-family: var(--gothic); font-weight: 600; font-size: 15px; color: var(--green-dd); line-height: 1.6; } .form__field { padding: 14px 18px; } .form__note { margin: 6px 0 0; font-size: 12.5px; color: var(--gray); line-height: 1.7; } .req, .opt { flex: none; margin-top: 3px; padding: 1px 7px; font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .04em; border-radius: 2px; line-height: 1.6; } .req { color: #fff; background: #c0522f; } .opt { color: var(--gray); background: var(--paper-3); } .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea { width: 100%; padding: 14px 15px; font-family: var(--body); font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--ink); background: #fff; border: 1px solid #c6cfc3; border-radius: 3px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .form textarea { min-height: 220px; resize: vertical; line-height: 1.9; } .form input:focus, .form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(100, 170, 49, .18); } .form input::placeholder, .form textarea::placeholder { color: #a9b1a7; } /* 赤枠は「利用者が入力・操作したうえで不備がある」場合だけ出す。 :invalid だと未入力の必須項目が最初から赤くなってしまうため使わない。 */ .form input:user-invalid, .form textarea:user-invalid { border-color: #d1553a; } .form input:user-invalid:focus, .form textarea:user-invalid:focus { box-shadow: 0 0 0 3px rgba(209, 85, 58, .18); } .form__actions { margin-top: 28px; text-align: center; } .btn--lg { padding: 15px 56px; font-size: 15.5px; } button.btn { cursor: pointer; font-family: var(--gothic); } button.btn::after { margin-left: 2px; } /* reCAPTCHAのバッジ（画面右下に固定表示される）と 「ページ上部へ戻る」ボタンが重なるため、フォームのページでは上へ逃がす */ body.has-recaptcha .to-top { bottom: 88px; } /* 送信結果（mail.php） */ .msg { max-width: 720px; padding: 28px 30px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 3px; } .msg h2 { margin-bottom: 12px; font-size: 19px; color: var(--green-dd); } .msg p { font-size: 14.5px; line-height: 1.95; } .msg__actions { margin-top: 24px; } .msg--error { border-top-color: #d1553a; } .msg--error h2 { color: #b03a1e; } /* -------------------------------------------------------------------------- 18. スクロール表示 -------------------------------------------------------------------------- */ .reveal { opacity: 0; transition: opacity .45s var(--ease); } .reveal.is-in { opacity: 1; } /* 読み込み時点で画面内にある要素は動かさずに表示する（ページ切替時のちらつき防止） */ .reveal.no-anim { transition: none; } .reveal[data-delay="1"] { transition-delay: .07s; } .reveal[data-delay="2"] { transition-delay: .14s; } /* -------------------------------------------------------------------------- 19. レスポンシブ -------------------------------------------------------------------------- */ /* メニューが折り返す幅（約930px）より手前でドロワーに切り替える */ @media (max-width: 980px) { :root { --header-h: 64px; } .logo { gap: 9px; } .logo__mark { height: 36px; } .logo__ja { font-size: 15px; } .logo__en { font-size: 9px; } .burger { display: block; } .nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 0; padding: 0 30px; background: var(--green-dd); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); } .nav.is-open { opacity: 1; visibility: visible; } .nav__link { width: 100%; padding: 16px 0; font-size: 17px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.18); } .nav__link::after { display: none; } .nav__link:hover, .nav__link[aria-current] { color: #fff; } .header__cta { margin: 22px 0 0; padding: 13px 24px; background: #fff; color: var(--green-dd); } .header__cta:hover { background: #fff; color: var(--green-dd); } .hero { min-height: 340px; } .news-row { grid-template-columns: 1fr; gap: 3px; } .tl__row { grid-template-columns: 1fr; gap: 3px; } .tbl th, .tbl td { display: block; width: auto; white-space: normal; } .form__row { grid-template-columns: 1fr; } .form__label { border-right: 0; border-bottom: 1px solid var(--line); padding: 11px 16px; } .form__field { padding: 14px 16px; } /* iOSで入力欄をタップした際の自動ズームを防ぐため16px以上にする */ .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea { font-size: 16px; } .btn--lg { width: 100%; justify-content: center; padding: 15px 20px; } .tbl th { border-bottom: 0; } .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .biz { padding: 20px 18px 22px; } .svc-row { padding: 16px 18px; } .map iframe { height: 260px; } } /* -------------------------------------------------------------------------- 20. 設定への配慮 -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } @media print { .header, .to-top, .hero__canvas { display: none !important; } body { color: #000; } .hero, .page-head { background: #fff !important; color: #000 !important; } }