@charset "utf-8"; /* CSS Document */ /* ======================================================== 　 / =========================================================== */ html { font-size: 62.5%; /* 1.0rem = 10px */ text-size-adjust: 100%; -webkit-tap-highlight-color: var(--black-color); } body { color: var(--text-color); font: normal 400 1.6rem / 150% var(--font-sans); font-optical-sizing: auto; overflow-x: hidden; /* フッターをページ下部に移動させるためのコード */ display: flex; flex-direction: column; min-height: 100vh; } #footer { margin-top: auto; } /*　カスタムスクロールバー ----------------------------------------------------------- */ body::-webkit-scrollbar { width: 1.0rem; } body::-webkit-scrollbar-track { background-color: var(--contrast-color); } body::-webkit-scrollbar-thumb { background-color: var(--corporate-color); } /* ======================================================== 　Anchor Color =========================================================== */ a, a:visited { color: var(--text-color); outline: none; text-decoration: none; transition: 0.3s } a:hover, a:focus { color: var(--accent-color); } a[href*="tel:"] { color: var(--text-color); } main section a, main section a:visited { text-decoration: underline; } /* スマホ以外で電話番号の発信をオフ */ @media (min-width: 576px) { a[href*="tel:"] { pointer-events: none; } } /* ======================================================== 　Typography =========================================================== */ h1, h2, h3, h4, h5, p, li, dt, dd, span, 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 dd { line-height: 180%; } /* ======================================================== 　header =========================================================== */ #header { display: flex; align-items: center; background-color: var(--corporate-color); z-index: 997; transition: 0.3s; } #header div[class^="container-"] { display: flex; align-items: center; justify-content: space-between; } #header div[class="container"] { display: flex; justify-content: flex-end; } /* アンカー設定 */ #header a, #header a:focus { display: flex; align-items: center; font-weight: 700; } /*　メニューエリア ----------------------------------------------------------- */ #navmenu { position: relative; padding: 0; z-index: 9997; } #navmenu ul { list-style: none; } /*　解像度　幅 1200px以下（モバイル）に適用 ----------------------------------------------------------- */ @media (max-width: 1199.98px) { #header { height: 6.0rem; /* 高さ固定 */ } #header div[class^="container"] { padding-right: 0; /* ハンバーガートグルを右寄せにするため余白削除*/ } /* ブランドマーク */ #header h1 img { height: min(8.0vw, 3.4rem); z-index: 9999; } /* メニュー */ #navmenu ul { display: none; /* デフォルトは非表示 */ } /* ハンバーガートグル */ .toggler { display: grid; place-content: center; width: 6.0rem; height: 6.0rem; background: url("../img/toggler.png") center center / cover no-repeat; z-index: 9999; } /*　モバイルメニューがアクティブになった時の処理 ----------------------------------------------------------- */ .mobile-nav-active { overflow: hidden; } /* ハンバーガートグル＝ ✕ に */ .mobile-nav-active .bi-x { position: absolute; inset: 0 0 auto auto; background-image: url("../img/toggler-x.png"); font-size: 0; /* デフォルトの x を視認できなくする */ z-index: 9999; } /* メニューエリアオープン */ .mobile-nav-active #navmenu { position: fixed; inset: 0; overflow: hidden; } /* 背景白に */ .mobile-nav-active #navmenu .inner { height: 100%; margin-top: 6.0rem; padding-top: 6.0rem; background-color: var(--white-color); overflow-y: auto; } /* メニュー */ .mobile-nav-active #navmenu ul { display: block; /* トグルアクティブで表示 */ margin: 0 min(10.0vw, 20.0rem); z-index: 9998; } /* メニューリスト */ #navmenu li[class*="menu-item-"] a, #navmenu li[class*="menu-item-"] a:focus { max-width: 30.0rem; height: 3.0rem; padding: 0 1.5rem; border-left: 0.5rem double var(--corporate-color); color: var(--text-color); } #navmenu li[class*="menu-item-"]:nth-of-type(n+2) { margin-top: 3.0rem; } #navmenu li:last-of-type { margin-bottom: 10.0rem; /* スマホ時のスクロール調整のため必須 */ } #navmenu li:last-of-type a { justify-content: center; height: 5.0rem; background-color: var(--corporate-color); color: var(--white-color); } /* カレントページの処理 */ .mobile-nav-active #navmenu li[class*="menu-item-"] a[aria-current="page"] { border-left-color: var(--accent-color); pointer-events: none; } } /*　解像度　幅 768px以上（タブレット）に適用 ----------------------------------------------------------- */ @media (min-width: 768px) { #header { height: 8.0rem; } #header h1 img { height: 5.0rem } .toggler { width: 8.0rem; height: 8.0rem; } .mobile-nav-active #navmenu .inner { margin-top: 8.0rem; padding-top: 8.0rem; } } /*　解像度　幅 1200px以上（デスクトップ）に適用 ----------------------------------------------------------- */ @media (min-width: 1200px) { #header { height: 10.0rem; } #header div[class="container"] { justify-content: center; } #header h1 { margin-left: min(3.0vw, 5.0rem); } #header h1 img { height: min(3.0vw, 5.2rem); transition: 0.3s; } #header h1 img:hover { opacity: 0.7; } /*　メニューエリア ----------------------------------------------------------- */ #navmenu ul { display: flex; } #navmenu li.menu-item-home { display: none; } #navmenu li a, #navmenu li a:focus { place-content: center; height: 10.0rem; padding: 0 min(1.4vw, 2.4rem); color: var(--white-color); } /* マウスオーバー時の設定 */ #navmenu li a:hover { background-color: color-mix(in srgb, var(--white-color), transparent 30%); color: var(--text-color); } /* アクティブ時の設定 */ #navmenu li[class*="current-menu-item"] a { background-color: var(--green-color); pointer-events: none; } #navmenu li:last-of-type a { background-color: var(--white-color); color: var(--corporate-color); } #navmenu li:last-of-type a:hover { background-color: color-mix(in srgb, var(--white-color), transparent 30%); color: var(--text-color); } #navmenu li:last-of-type[class*="current-menu-item"] a { background-color: var(--green-color); color: var(--white-color); pointer-events: none; } /* ハンバーガートグル非表示 */ .toggler { display: none; } } @media (min-width: 1900px) { #header div[class="container"] { justify-content: flex-start; max-width: 98.7rem; } } /* ======================================================== 　main / article / section =========================================================== */ main { overflow: hidden; } .section { padding: min(12.0vw, 6.0rem) 0; scroll-margin-top: 6.0rem; overflow: clip; } /* 見出し */ .heading { display: flex; align-items: baseline; justify-content: center; margin-bottom: min(14.0vw, 5.0rem); color: var(--heading-color); } .heading h2 { font-family: "Poppins", sans-serif; font-size: 4.5rem; font-weight: 200; text-transform: capitalize; } .heading span { margin-left: 2.0rem; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-size: 1.0rem; font-weight: 400; } /* more */ .more a { display: inline-flex; align-items: center; height: 4.0rem; text-decoration: none; } .more span { position: relative; } .more a span::after { position: absolute; inset: auto auto -0.5rem 50%; transform: translateX(-50%); width: 100%; height: 0.1rem; background-color: var(--text-color); content: ""; transition: 0.3s; } .more img { width: 4.0rem; margin-left: 2.4rem; transition: 0.3s; } @media (min-width: 768px) { .section { scroll-margin-top: 8.0rem; } .heading { justify-content: flex-start; margin-bottom: min(5.0vw, 7.0rem); } .heading h2 { font-size: min(12.0vw, 5.0rem); } .heading span { font-size: min(5.0vw, 2.0rem); } } @media (min-width: 992px) { .heading h2 { font-size: min(5.0vw, 9.0rem); } .more a:hover span::after { background-color: var(--corporate-color); } .more:hover img { transform: translateX(0.5rem); } } @media (min-width: 1200px) { .section { scroll-margin-top: 10.0rem; } } /* ======================================================== 　footer =========================================================== */ #footer { width: 100%; padding-top: min(10.0vw, 5.0rem); background-color: var(--corporate-color); color: var(--white-color); } #footer ul { list-style: none; } #footer a { color: var(--white-color); } /* ロゴ｜所在地 */ #footer .container > div:nth-of-type(1) { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ロゴ */ #footer .container > div:nth-of-type(1) img { width: min(100%, 50.0rem); margin-bottom: min(8.0vw, 4.0rem); } /* 所在地 */ #footer .container > div:nth-of-type(1) p { letter-spacing: 0.1rem; } #footer .container > div:nth-of-type(1) p:nth-of-type(n+2) { margin-top: 1.0rem; } #footer .container > div:nth-of-type(1) p span { display: block; /* 折り返し */ margin-top: 0.5rem; margin-left: 2.2rem; } /* リンクボタン */ #footer .container > div:nth-of-type(2) { display: flex; flex-direction: column; align-items: center; margin-top: min(14.0vw, 7.0rem); padding-bottom: min(16.0vw, 8.0rem); border-bottom: 0.1rem solid var(--white-color); } /* アンカーの設定 */ #footer .container > div:nth-of-type(2) a { display: flex; align-items: center; justify-content: center; width: min(100%, 36.0rem); height: min(19.444vw, 7.0rem); border: 0.2rem solid var(--white-color); color: var(--white-color); font-size: 1.8rem; } #footer .container > div:nth-of-type(2) a:nth-of-type(n+2) { margin-top: 1.5rem; } /* アイコン */ #footer .container > div:nth-of-type(2) i { margin-right: 1.0rem; font-size: 150%; } /* フッターナビ */ #footer nav { margin: min(10.0vw, 5.0rem) 10.0vw 0 10.0vw; } /* アンカーの設定 */ #footer nav a { font-size: 2.0rem; } /* ナビリスト */ #footer nav > ul { padding-bottom: 4.0rem; } #footer nav li.menu-item-has-children > a { font-weight: 700; } #footer nav li.menu-item-privacy-policy { margin-top: min(10.0vw, 5.0rem); } #footer nav li.menu-item-privacy-policy a { font-size: 1.6rem; font-weight: 400; } /* サブメニュー */ #footer nav ul.sub-menu li { margin-top: 1.5rem; margin-left: 1.0rem; } #footer nav ul.sub-menu li:first-of-type { margin-top: 2.0rem; } #footer nav ul.sub-menu li::before { margin-right: 0.25rem; font-family: 'bootstrap-icons'; font-size: 1.2rem; content: "\f285"; } /* サブメニューのアンカーの設定 */ #footer nav ul.sub-menu a { font-size: 1.6rem; } /* ポリシーリンクの調整 */ #footer nav a[href*="%e3%83%9d%e3%83%aa%e3%82%b7%e3%83%bc"] { margin-top: 4.0rem; font-weight: 700; } #footer nav a[href*="%e3%82%b5%e3%82%a4%e3%83%88%e3%83%9d%e3%83%aa%e3%82%b7%e3%83%bc"] { margin-top: 2.0rem; font-weight: 700; } @media (min-width: 576px) { #footer .container > div:nth-of-type(1) p span { display: inline; margin: 0; } #footer nav { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; margin: min(10.0vw, 5.0rem) 0 0; } #footer nav > ul { display: flex; flex-direction: column; flex-basis: 50%; } } @media (min-width: 768px) { #footer nav > ul { flex-basis: 40%; } } @media (min-width: 992px) { #footer .container > div:nth-of-type(2) { display: flex; flex-direction: row; justify-content: space-between; margin-left: 0; margin-right: 0; } #footer .container > div:nth-of-type(2) a:nth-of-type(n+2) { margin-top: 0; } #footer .container > div:nth-of-type(2) a { width: min(30.0vw, 36.0rem); } #footer nav { max-width: 108.0rem; } #footer nav > ul:nth-of-type(1) { flex-basis: 20%; } #footer nav > ul:nth-of-type(2) { flex-basis: 29%; } #footer nav > ul:nth-of-type(3) { flex-basis: 19%; } #footer nav > ul:nth-of-type(4) { flex-basis: 22%; } #footer nav > ul:nth-last-of-type(n+2) { margin-right: 3.0%; border-right: 0.1rem solid var(--white-color); } #footer nav li.menu-item-privacy-policy { margin-top: min(4.0vw, 2.0rem); } /* マウスオーバー時の設定 */ #footer .container > div:nth-of-type(2) a:hover { background-color: var(--white-color); color: var(--corporate-color); } #footer nav a { display: inline-block; position: relative; } #footer nav a::after { position: absolute; inset: auto auto -0.5rem 50%; transform: translateX(-50%); width: 0; height: 0.1rem; background-color: var(--white-color); content: ""; transition: 0.3s; } #footer nav a:hover::after { width: 100%; } } @media (min-width: 1200px) { #footer nav > ul:nth-of-type(1) { flex-basis: 18%; } #footer nav > ul:nth-of-type(2) { flex-basis: 27%; } #footer nav > ul:nth-of-type(3) { flex-basis: 17%; } #footer nav > ul:nth-last-of-type(n+2) { margin-right: 5.0%; } } @media (min-width: 1400px) { #footer .container { max-width: 120.0rem; } } /*　copyright ----------------------------------------------------------- */ #footer aside { display: grid; place-content: center; height: min(16.0vw, 8.0rem); margin-top: min(6.0vw, 3.0rem); background-color: rgba(62, 58, 57, 1.00); color: var(--white-color); } @media (min-width: 992px) { #footer aside { margin-top: min(14.0vw, 7.0rem); } } /* ======================================================== 　scroll top button =========================================================== */ .scroll-top { visibility: hidden; display: flex; align-items: center; justify-content: center; position: fixed; inset: auto 1.0rem calc(min(16.0vw, 8.0rem) + 1.0rem) auto; width: 3.6rem; height: 3.6rem; border-radius: 50%; background-color: var(--green-color); opacity: 0.7; z-index: 99; transition: 0.3s; } .scroll-top i { color: var(--white-color); font-size: 3.0rem; } .scroll-top:hover { opacity: 1.0; transform: scale(1.1); } .scroll-top.active { visibility: visible; } @media (min-width: 1200px) { .scroll-top { width: 5.0rem; height: 5.0rem; } } /* ======================================================== 　その他 =========================================================== */ /*　AOS調整 ----------------------------------------------------------- */ /* フェードの移動距離調整 */ [data-aos=fade-up] { transform: translate3d(0, 2.0rem, 0); } [data-aos=fade-right] { transform: translate3d(-3.0rem, 0, 0); } [data-aos=fade-left] { transform: translate3d(8.0rem, 0, 0); } /* モバイル時、AOSアニメーションの遅延を無効 */ @media (min-width: 768px) { [data-aos-delay] { transition-delay: 0 !important; } } /*　AIOSEO PROのバナーを非表示に ----------------------------------------------------------- */ #poststuff #advanced-sortables { display: none; } /* ---- End of file --------------------------------------- */