@charset "utf-8"; /* CSS Document */ /* ======================================================== 　Global Setting =========================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { scroll-behavior: smooth; } /*　ページ内でテキスト等を選択したときの背景色 ----------------------------------------------------------- */ *::selection { background-color: rgba(90, 150, 175, 0.25); } /*　プレイスホルダー ----------------------------------------------------------- */ *::placeholder { opacity: 0.8; transition: 0.3s } /*　Pseudo-hide placeholders when in focus */ *:focus::placeholder { opacity: 0; } html { font-size: 62.5%; /* 1.0rem = 10px */ text-size-adjust: 100%; -webkit-tap-highlight-color: var(--black-color); } /* ======================================================== 　 =========================================================== */ body { background-color: var(--white-color); color: var(--text-color); font: normal 400 1.6rem / 160% var(--sans-font); letter-spacing: 0.0625rem; } /*　スクロールバー ----------------------------------------------------------- */ body::-webkit-scrollbar { width: 1.0rem; } body::-webkit-scrollbar-track { background-color: var(--contrast-color); } body::-webkit-scrollbar-thumb { border-radius: 0.5rem; background-color: var(--blue-color-02); } /* ======================================================== 　Link Color =========================================================== */ a, a:visited { color: var(--blue-color-01); outline: none; text-decoration: none; transition: 0.3s } a:hover, a:focus { color: var(--surface-color); } main a[href*="tel:"] { color: var(--text-color); } /* 電話番号の発信をオフ */ @media (min-width: 576px) { a[href*="tel:"] { pointer-events: none; } footer a[href*="tel:"] { color: var(--gray-color-03); } } /* ======================================================== 　Typography =========================================================== */ h1, h2, h3, h4, h5, span, p, li, dt, dd, aside, a { margin: 0; padding: 0; line-height: 1; } em { font-style: normal; } ul { margin: 0; padding: 0; list-style: none; } main .section p, main .section li, main .section dt, main .section dd, main .section th, main .section td { line-height: 160%; } /* ======================================================== 　
=========================================================== */ header { display: flex; align-content: center; justify-content: space-between; padding: 1.0rem; transition: 0.5s; z-index: 997; } /* ロゴ領域 */ header #brand { width: 70%; z-index: 9999; } header #brand img { width: auto; height: min(13.0vw, 5.0rem); transition: 0.5s } /* マウスオーバー時 */ header #brand img:hover { opacity: 0.7; } /* お問い合わせボタン非表示 */ header #contact { display: none; } /* スクロール時の処理 */ .scrolled header { background-color: var(--white-color); box-shadow: 0 0 1.0rem rgba(0, 0, 0, 0.25); } @media (min-width: 992px) { header { display: flex; align-items: center; height: 10.0rem; padding: 2.0rem min(2.5vw, 5.0rem); animation: fade 2.0s; /* フェードアニメーション */ } .scrolled header { border-bottom: 0.1rem solid rgba(90, 150, 175, 0.50); } header #brand img { height: min(4.75vw, 6.0rem); } /* お問い合わせボタン表示と設定 */ header #contact { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0 0 auto auto; width: 10.0rem; height: 10.0rem; background-color: var(--blue-color-01); overflow: hidden; /* transition: 0.3s; AOSが効かなくなるので無効 */ } /* お問い合わせアイコン */ header #contact img { width: 100%; transition: 0.3s; } /* マウスオーバー時 */ header #contact a:hover img { transform: scale(1.05); } } @media (min-width: 1200px) { header { height: 12.0rem; } header #brand img { height: min(4.75vw, 8.2rem); } header #contact { width: 12.0rem; height: 12.0rem; } } @media (min-width: 1400px) { header { height: 14.0rem; } header #contact { width: 14.0rem; height: 14.0rem; } } /* ========================================================