@charset "utf-8"; /* CSS Document */ *, *::before, *::after { box-sizing: border-box; } :root { scroll-behavior: smooth; /* スムーススクロール */ } /*　ページ内でテキスト等を選択したときの背景色 ----------------------------------------------------------- */ *::selection { background-color: color-mix(in srgb, var(--gray-color2), transparent 50%); background-color: rgba(210, 210, 210, 0.50); } /*　プレイスホルダー ----------------------------------------------------------- */ *::placeholder { opacity: 0.8; transition: 0.3s } *:focus::placeholder { opacity: 0; /*　フォーカス時にプレースホルダーを擬似的に非表示にする */ } /* ======================================================== 　 / =========================================================== */ html { font-size: 62.5%; /* 1.0rem = 10px */ text-size-adjust: 100%; /* スマホでの文字拡大をオフ */ -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; /* スマホでリンクをタップした時一瞬表示される青いハイライトをオフ */ } body { background-color: var(--white-color); color: var(--text-color); font: normal 500 1.6rem / 160% var(--default-font); overflow-x: hidden; } /* フッターをページ下部に移動させるためのコード */ body { display: flex; flex-direction: column; min-height: 100vh; } #footer { margin-top: auto; } /*　カスタムスクロールバー ----------------------------------------------------------- */ body::-webkit-scrollbar { width: 0.8rem; } body::-webkit-scrollbar-track { border-radius: 0.5rem; background-color: var(--surface-color); } body::-webkit-scrollbar-thumb { border-radius: 0.5rem; background-color: var(--corp-color); } /* ======================================================== 　Anchor Color =========================================================== */ a, a:visited { outline: none; text-decoration: none; transition: 0.3s } a:hover, a:focus {} a[href*="tel:"] { color: var(--text-color); } @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: 100%; } main .section p, main .section li, main .section dd, main .section span, main .section aside, main .section a, main .section a:focus { line-height: 160%; } ul { margin: 0; padding: 0; } /* ======================================================== 　Global Header =========================================================== */ header { position: fixed; inset: 0 0 auto; padding: 0; z-index: 997; transition: 0.3s; } /* ファーストビューから100vhスクロールした時 */ header.changed { animation: fadeToWhite 0.5s forwards; } body:not(.home) header { background-color: var(--white-color); transform: none; } /* container */ header > .container { display: flex; align-items: center; justify-content: space-between; max-width: 144.0rem; /* figmaの横幅による */ height: 5.8rem; padding: 0; } /* logo */ header > .container > a { position: relative; margin-left: min(5.84358vw, 2.279rem); } header > .container > a img { width: auto; height: 3.347rem; } @media (min-width: 1200px) { /* container */ header > .container { height: 6.3rem; } /* logo */ header > .container > a { margin-left: min(2.08333vw, 3.0rem); } header > .container > a img { height: 4.8rem; transition: 0.3s; } header > .container > a:hover img { opacity: 0.7; } /* order */ header #navmenu { order: 2; } header #other { order: 3; } } @media (min-width: 1400px) { /* logo */ header > .container > a { margin-left: min(6.94444vw, 5.0rem); } } /* ======================================================== 　Global Navigation =========================================================== */ #navmenu { padding: 0; font-family: var(--kaku-font); z-index: 9997; } /*　mobile ----------------------------------------------------------- */ @media (max-width: 1199.98px) { /* 第一階層メニュー */ #navmenu ul { display: none; position: absolute; inset: 2.0rem; padding: 2.0rem; border-radius: 1.0rem; background-color: var(--white-color); list-style: none; overflow-y: auto; z-index: 9998; transition: 0.3s; } #navmenu > ul > li:nth-of-type(n+2) { margin-top: min(4.0vw, 2.0rem); /* ２番目以降の上余白 */ } #navmenu a { display: flex; align-items: center; justify-content: space-between; height: 5.0rem; padding: 0 0 0 2.0rem; border-radius: 0 2.5rem 2.5rem 0; background-color: color-mix(in srgb, var(--surface-color), transparent 50%); background-color: rgba(230, 230, 230, 0.50); color: var(--text-color); font-size: 1.8rem; font-weight: 700; letter-spacing: 1.0%; transition: 0.3s; } #navmenu > ul > li > .active { background-color: color-mix(in srgb, var(--corp-color), transparent 80%); background-color: rgba(93, 143, 206, 0.20); } /* ドロップダウンアイコン*/ #navmenu > ul > li > a i { display: flex; align-items: center; justify-content: center; width: 5.0rem; height: 5.0rem; border-radius: 50%; background-color: var(--corp-color); color: var(--white-color); line-height: 0; transition: 0.3s; } /* アクティブ時のドロップダウンアイコン */ #navmenu > ul > li > .active i { color: var(--corp-color); background-color: color-mix(in srgb, var(--corp-color), transparent 75%); background-color: rgba(93, 143, 206, 0.25); transform: rotate(180deg); } /* ドロップダウントグルがアクティブの時メニューをオンに */ #navmenu .dropdown > .dropdown-active { display: block; } /* ドロップダウンメニュー */ #navmenu .dropdown ul { display: none; position: static; margin: 1.0rem 0 1.0rem 2.0rem; padding: 1.0rem 0; z-index: 99; transition: 0.5s; } #navmenu .dropdown ol { list-style: none; } #navmenu .dropdown li span { display: block; margin-bottom: 1.0rem; color: var(--corp-color); font-size: 1.7rem; text-align: left; } #navmenu .dropdown li span::before { content: '- ' } #navmenu .dropdown li a { height: 4.0rem; padding-left: 0; border-radius: 0; border-bottom: 0.1rem dotted rgba(160, 160, 160, 1.00); background-color: transparent; font-family: var(--default-font); font-size: 1.6rem; font-weight: 500; /* 親700からダウン */ } #navmenu .dropdown ol a { font-size: 1.5rem; } /* caret */ #navmenu .dropdown li > a::after { font-family: 'bootstrap-icons'; content: "\f285"; } /*　button ----------------------------------------------------------- */ header #other { position: absolute; inset: auto min(17.17948vw, 6.7rem) auto auto; height: 5.8rem; } header #other a { display: inline-block; width: min(15.64102vw, 6.1rem); height: 5.8rem; aspect-ratio: 61 / 58; letter-spacing: 1.0%; } header #other a:first-of-type { background-color: var(--corp-color); } header #other a:last-of-type { background-color: var(--accent-color); } header #other img { width: 100%; height: auto; } header #other span { display: none; } /*　toggler ----------------------------------------------------------- */ .toggle { display: inline-flex; align-items: center; justify-content: center; width: min(17.17948vw, 6.7rem); height: 5.8rem; color: var(--corp-color); font-size: 4.0rem; line-height: 0; transition: 0.3s; } /* toggler active */ .toggle-active { overflow: hidden; /* トグルアクティブ時は［三］非表示 */ } /* トグルアクティブ時は、Javascriptでアイコンを［ bi-x ］に置換して最前面に */ .toggle-active .toggle { z-index: 9999; } /* トグルアクティブ時のメニュー背景 */ .toggle-active #navmenu { position: fixed; overflow: hidden; inset: 5.8rem 0 0; background-color: color-mix(in srgb, var(--black-color), transparent 25%); background: rgba(0, 0, 0, 0.75); transition: 0.3s; } .toggle-active #navmenu > ul { display: block; /* トグルアクティブ時にメニューリスト表示 */ } } @media (min-width: 576px) and (max-width: 1199.98px) { /* 第一階層メニュー */ #navmenu > ul { inset: 2.0rem 2.0rem 2.0rem auto; /* 右に寄せる */ width: 33.5rem; /* 最大幅固定 */ text-align: center; } } /*　desktop ----------------------------------------------------------- */ @media (min-width: 1200px) { header .wrapper { display: flex; align-items: center; } /* 第一階層メニュー */ #navmenu ul { display: flex; list-style: none; } #navmenu > ul > li:nth-last-of-type(2) { display: none; /* デスクトップでは製品カタログを非表示 */ } #navmenu > ul > li > a { display: flex; align-items: center; height: 6.3rem; padding: 1.5rem; color: var(--text-color); font-weight: 700; letter-spacing: 1.0%; transition: 0.5s; } /* catret */ #navmenu > ul > li > a i { margin-left: 0.5rem; font-size: 1.4rem; line-height: 0; transition: 0.3s; } #navmenu > ul > li > a:hover i { transform: rotate(180deg); } #navmenu .dropdown { position: static; transition: 0.3s; } #navmenu .dropdown:hover, #navmenu > ul li a:hover { background-color: rgba(180, 205, 236, 1.00); } /* ドロップダウンメニュー */ #navmenu .dropdown ul { visibility: hidden; display: flex; justify-content: center; position: absolute; inset: 6.3rem 0 auto 0; width: 100%; padding: 5.0rem 0; background-color: rgba(180, 205, 236, 1.00); opacity: 0; z-index: 99; transition: 0.5s; } /* マウスオーバーしたらドロップダウンメニューをオンに */ #navmenu .dropdown:hover > ul { visibility: visible; opacity: 1; } #navmenu .dropdown > ul > li:nth-of-type(n+2) { margin-left: min(12.0vw, 6.0rem); /* ２番目以降の左余白 */ } #navmenu .dropdown li span { display: block; margin-bottom: 3.0rem; color: var(--contrast-color); font-size: 1.7rem; } #navmenu .dropdown li span::before { content: '- ' } #navmenu .dropdown > ul a { display: inline-flex; position: relative; height: inherit; padding: 0; color: var(--text-color); font-family: var(--default-font); font-size: 1.6rem; font-weight: 500; /* 親700からダウン */ } #navmenu .dropdown > ul a:hover { color: var(--black-color); } /* caret */ #navmenu .dropdown ul a::after { display: inline-block; margin-left: 0.25rem; font-family: 'bootstrap-icons'; font-size: 90%; content: "\f285"; transition: 0.3s; } #navmenu .dropdown ul a:hover::after { color: var(--black-color); transform: translateX(0.5rem); } #navmenu .dropdown ol { margin-top: min(4.0vw, 2.0rem); list-style: none; } #navmenu .dropdown ol li:nth-of-type(n+2) { margin-top: min(4.0vw, 2.0rem); /* ２番目以降の上余白 */ } #navmenu .dropdown ol a { font-size: 1.5rem; } /*　button ----------------------------------------------------------- */ header #other { margin-left: min(3.33333vw, 4.8rem); /* ボタン領域の左余白 */ margin-right: min(2.08333vw, 3.0rem); /* ボタン領域の右余白 */ } header #other a:nth-of-type(n+2) { margin-left: min(2.5vw, 3.6rem); /* ２番目以降のボタンの左余白 */ } header #other a { display: inline-flex; align-items: center; justify-content: center; position: relative; width: min(11.80555vw, 17.0rem); height: 4.0rem; color: var(--white-color); font-family: var(--kaku-font); font-weight: 700; letter-spacing: 1.0%; overflow: hidden; } header #other a::after { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(0); width: 10.0rem; height: 10.0rem; border-radius: 50%; background-color: color-mix(in srgb, var(--white-color), transparent 50%); background-color: rgba(255, 255, 255, 0.50); content: ''; opacity: 1; transition: transform 1.0s, opacity 1.0s; } header #other a:hover::after { transform: translate(-50%, -50%) scale(5.0); opacity: 0; } header #other a:first-of-type { background-color: var(--corp-color); } header #other a:last-of-type { background-color: var(--accent-color); } header #other img { display: none; /* アイコンを非表示に */ } /*　toggler ----------------------------------------------------------- */ .toggle { display: none; /* トグラーを非表示に */ } } @media (min-width: 1400px) { header #other { margin-right: min(3.47222vw, 5.0rem); /* ボタン領域の右余白 */ } } /* ======================================================== 　Global Sections =========================================================== */ .section { width: 100vw; padding: 6.5rem 0 8.0rem; scroll-margin-top: 5.8rem; overflow: clip; } .home section .container { padding: 0; } @media (min-width: 992px) { .section { padding: 8.0rem 0 10.0rem; } } @media (min-width: 1200px) { .section { scroll-margin-top: 6.3rem; } } @media (min-width: 1900px) { .section { padding: 10.0rem 0 14.0rem; } } /* ======================================================== 　Global Heading =========================================================== */ .heading { position: relative; color: var(--corp-color); text-align: center; } .heading h2 { margin-bottom: 1.0rem; font-family: var(--heading-font); font-optical-sizing: auto; font-size: 5.0rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.0%; } .heading.sub h2 { margin-bottom: 0.5rem; color: rgba(125, 163, 211, 1.00); font-size: 1.9rem; font-weight: 500; /* weightダウン*/ letter-spacing: 13%; text-indent: 0.3rem; /* letter-spacing によるレイアウトのズレを補正 */ } .heading h3 { font-family: var(--kaku-font); font-size: 2.0rem; font-weight: 700; letter-spacing: 30.0%; text-indent: 0.7rem; /* letter-spacing によるレイアウトのズレを補正 */ } .heading.sub h3 { font-size: 2.6rem; letter-spacing: 30.0%; text-indent: 0.9rem; /* letter-spacing によるレイアウトのズレを補正 */ } /* フェードアップ */ .heading .fade { opacity: 0; transform: translateY(20px); transition: all 1.0s ease-in-out; } .heading .fade.show { opacity: 1; transform: translateY(0); } .heading h3.fade.show { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } @media (min-width: 1200px) { .heading h2 { margin-bottom: 2.4rem; font-size: 8.0rem; } .heading h3 { font-size: 2.8rem; text-indent: 1.0rem; /* letter-spacing によるレイアウトのズレを補正 */ } .heading.sub h3 { font-size: 3.2rem; text-indent: 1.2rem; /* letter-spacing によるレイアウトのズレを補正 */ } } /* ======================================================== 　Global Footer =========================================================== */ /*　contact ----------------------------------------------------------- */ #footer .contact { position: relative; padding: 6.2rem 2.7rem 8.0rem; } /* 前面レイヤー */ #footer .contact::before { position: absolute; inset: 0; background-color: var(--contrast-color); content: ''; opacity: 0.8; } #footer .contact .heading { color: var(--white-color); } /* バナー領域 */ #footer .banner { display: flex; flex-direction: column; position: relative; width: min(100%, 129.4rem); margin: min(14.102556vw, 5.5rem) auto 0; padding: 4.6rem 4.3rem 4.1rem; border-radius: min(4.87179vw, 1.9rem); background-color: var(--white-color); } /* 区切り線 */ #footer .banner > span { width: min(41.79487vw, 16.3rem); height: 0.2rem; margin: 4.1rem auto; background-color: rgba(204, 204, 204, 1.00); } #footer .banner > span:last-of-type { display: none; } /* バナー */ #footer .banner > div { margin: 0 auto; font-family: var(--kaku-font); text-align: center; } /* 見出し */ #footer .contact h4 { color: var(--corp-color); font-size: 2.0rem; font-weight: 700; letter-spacing: 1.0%; } /* キャッチ */ #footer .contact p { margin: 2.0rem 0 1.4rem; font-weight: 700; line-height: 2.2rem; letter-spacing: 1.0%; } /* ボタン*/ #footer .contact a { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 25.0rem; height: 4.8rem; border-radius: 0.6rem; font-weight: 700; letter-spacing: 1.0%; transition: 0.3s; } #footer .contact a[href*=".pdf"] { border: 0.3rem solid var(--corp-color); background-color: var(--white-color); color: var(--corp-color); } #footer .contact a[href*="contact"] { background-color: var(--corp-color); color: var(--white-color); } #footer .contact a[href="https://www.296show-by.com/index.htm"] { background-color: var(--accent-color); color: var(--white-color); } @media (min-width: 768px) { /* バナー領域 */ #footer .banner { flex-direction: row; justify-content: center; margin: min(6.11111vw, 8.8rem) auto 0; padding: 4.6rem min(3.47222vw, 5.0rem) 4.1rem; } /* 区切り線 */ #footer .banner > span { width: 0.2rem; height: min(41.79487vw, 16.3rem); margin: 0 1.0rem; } /* バナー */ #footer .banner > div { margin: 0; width: 33.33333%; } } @media (min-width: 768px) and (max-width: 991.98px) { /* バナー領域 */ #footer .banner { padding: 3.6rem 2.0rem; } /* 区切り線 */ #footer .banner > span { width: 0.2rem; height: min(28.20512vw, 11.0rem); margin: 0 1.0rem; } /* 見出し */ #footer .contact h4 { font-size: 1.7rem; } /* リード文 */ #footer .contact p { font-size: 1.3rem; } /* ボタン*/ #footer .contact a { width: 80%; height: 3.6rem; } } @media (min-width: 992px) { /* リード文 */ #footer .contact p { margin: 3.0rem 0 3.6rem; line-height: 3.0rem; } /* ボタン*/ #footer .contact a:hover { transform: scale(1.025); } } @media (min-width: 1200px) { /*　contact ----------------------------------------------------------- */ #footer .contact { padding: min(5.20833vw, 7.5rem) min(5.06944vw, 7.3rem) min(7.63888vw, 11.0rem); } /* バナー領域 */ #footer .banner { padding: min(5.69444vw, 8.2rem) min(3.47222vw, 5.0rem) min(5.83333vw, 8.4rem); border-radius: min(2.43055vw, 3.5rem); } /* 区切り線 */ #footer .banner > span { height: min(41.79487vw, 16.3rem); } /* 見出し */ #footer .contact h4 { margin-top: 0.3rem; font-size: 2.6rem; } /* ボタン */ #footer .contact a { width: 25.3rem; height: 6.1rem; font-size: 2.16rem; } } /*　informations ----------------------------------------------------------- */ #footer .informations { width: min(100%, 144.0rem); /* figmaの横幅による */ margin: 0 auto; padding-top: min(11.28205vw, 4.4rem); /* サイトマップまでの上余白 */ font-size: 1.4rem; } #footer li { list-style-type: none; } #footer .informations a { color: var(--text-color); } /* sitemap */ #footer .sitemap { width: 29.6rem; /* 最大幅 */ margin: 0 auto; } #footer .sitemap > div:nth-of-type(n+2), #footer .sitemap > div > ul > li:nth-of-type(n+2) { margin-top: min(5.64102vw, 2.2rem); /* ２番目以降のメニューブロックとお知らせ～オンラインショップの２番目以降の上余白 */ } #footer .sitemap .right ul:last-of-type { margin-top: min(5.64102vw, 2.2rem); /* お知らせ～オンラインショップの ul 上余白 */ } /* button とお知らせ～オンラインショップ */ #footer .sitemap button, #footer .sitemap > div > ul > li > a { color: var(--text-color); font-size: 1.6rem; font-weight: 700; line-height: 1; } #footer .sitemap button { display: inline-flex; justify-content: space-between; min-width: 14.0rem; padding: 0; border: none; background: none; font-size: 1.6rem; cursor: pointer; } /* caret */ #footer .sitemap button::after { font-family: 'bootstrap-icons'; content: "\f282"; transition: 0.3s; } #footer .sitemap .active button::after { transform: rotate(180deg); } /* sub menu */ #footer .acc-content { max-height: 0; margin: 0; padding: 0; overflow: hidden; transition: 0.3s; } #footer .acc-content li { margin-top: 1.8rem; margin-left: 0.2rem; line-height: 1.4; } #footer .acc-content li:first-of-type { margin-top: 1.5rem; /* １番目の上余白 */ } #footer .acc-content li:nth-of-type(n+2) { margin-top: 0.4rem; /* ２番目以降の上余白 */ } /* logo & company info */ #footer .locations { display: flex; justify-content: center; padding: min(14.87179vw, 5.8rem) min(3.84615vw, 1.5rem) min(11.28205vw, 4.4rem); /* locations領域の余白 */ } /* logo */ #footer .locations div:first-of-type { display: flex; align-items: center; /* ロゴを上下中央寄せ */ width: min(20.0vw, 9.1rem); margin-right: 1.6rem; } #footer .locations img { width: 100%; height: auto; } /* location */ #footer .locations div:last-of-type { width: calc(80.0vw - 1.6rem); max-width: 26.2rem; } #footer .locations dt { font-size: 1.6rem; font-weight: 700; } #footer .locations dt:nth-of-type(n+2) { margin-top: min(8.71794vw, 3.4rem); /* ２番目以降の上余白 */ } #footer .locations dd { margin-top: min(2.5641vw, 1.0rem); line-height: 2.4rem; } @media (min-width: 768px) { /*　informations ----------------------------------------------------------- */ #footer .informations { display: flex; justify-content: space-between; padding: min(4.58333vw, 6.6rem) min(3.0vw, 10.0rem) min(2.36111vw, 3.4rem); /* informations領域の余白 */ } /* sitemap */ #footer .sitemap { order: 2; width: 15.0rem; margin: 0; } #footer .sitemap button { cursor: inherit; } /* logo & company info */ #footer .locations { order: 1; margin-right: min(5.69444vw, 8.2rem); padding: 0; } /* logo */ #footer .locations div:first-of-type { align-items: flex-start; margin-right: min(5.8333vw, 8.4rem); } } @media (min-width: 992px) { /* sitemap */ #footer .sitemap { display: flex; justify-content: space-between; width: min(41.66666vw, 56.0rem); } #footer .sitemap > div { min-height: 31.0rem; /* sitemap 高さ */ } #footer .sitemap > div:nth-of-type(n+2) { margin-top: 0; /* ２番目以降のメニューブロックの上余白解除 */ } /* 各カテゴリーとお問い合わせ～オンラインショップ領域の上下寄せ */ #footer .left ul, #footer .right { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } #footer .right ul:last-of-type > li { line-height: 1.4; } #footer .right ul:last-of-type > li:nth-of-type(n+2) { margin-top: min(0.55555vw, 0.3rem); /* お問い合わせ～オンラインショップの２番目以降の上余白*/ } #footer .right ul:last-of-type a { font-size: 1.4rem; font-weight: 500; /* weightダウン*/ } #footer .sitemap button { min-width: inherit; } /* caret */ #footer .sitemap button::after { content: none; /* caret 非表示 */ } /* マウスオーバー時にボーダーライン */ #footer .sitemap a { position: relative; } #footer .sitemap a::before { display: inline-block; visibility: hidden; position: absolute; inset: auto auto 0 0; width: 0; height: 0.1rem; background-color: rgba(120, 120, 120, 1.00); content: ""; transition: 0.3s; } #footer .sitemap a:hover::before { visibility: visible; width: 100%; } /* logo */ #footer .locations div:first-of-type { width: min(12.708333vw, 18.3rem); } } @media (min-width: 1200px) { /*　informations ----------------------------------------------------------- */ #footer .informations { padding: min(4.58333vw, 6.6rem) min(6.94444vw, 10.0rem) min(2.36111vw, 3.4rem); /* informations領域の余白 */ } } @media (min-width: 1400px) { /*　informations ----------------------------------------------------------- */ #footer .informations { padding-right: min(11.45833vw, 16.5rem); /* informations領域の余白 */ } /* sitemap */ #footer .sitemap { width: min(37.152777vw, 53.5rem); } } /*　copyright ----------------------------------------------------------- */ #footer aside { display: flex; align-items: center; justify-content: center; height: min(14.48205vw, 5.648rem); background-color: rgba(217, 217, 217, 0.50); color: rgba(136, 136, 136, 1.00); font-family: var(--kaku-font); font-weight: 700; text-transform: uppercase; } @media (min-width: 1200px) { #footer aside { height: min(4.0493vw, 5.831rem); } } /* ======================================================== 　more Button =========================================================== */ /* fade in */ .more-btn { opacity: 0; transition: all 1.0s ease-in-out; } .more-btn.show { opacity: 1; } .more-btn a { display: flex; align-items: center; justify-content: center; position: relative; width: 25.0rem; height: 4.8rem; margin: 0 auto; border-radius: 0.4rem; font-family: var(--kaku-font); font-size: 1.6rem; font-weight: 700; letter-spacing: 15.0%; } .more-btn.blue a { background-color: var(--corp-color); color: var(--white-color); } /* arrow */ .more-btn a::after { display: inline-block; position: absolute; inset: 50% 2.0rem auto auto; transform: translateY(-48%); width: 1.6rem; height: 1.6rem; background: url("../img/arrow_r_w.png") center center / contain no-repeat; content: ""; vertical-align: middle; transition: 0.15s; } /* 特殊なタブレット */ @media (width: 800px) and (height: 600px) { .more-btn a { height: 4.8rem; border-radius: 0.4rem; font-size: 1.6rem; } .more-btn a::after { width: 1.6rem; height: 1.6rem; } } @media (min-width: 992px) { .home .more-btn a:hover, #recruitments .more-btn a:hover { background-color: var(--contrast-color); } .more-btn a:hover::after { right: 2.5rem; } } @media (min-width: 1200px) { .more-btn a { width: 33.0rem; height: 6.8rem; border-radius: 0.6rem; font-size: min(1.5vw, 2.16rem); } .more-btn a::after { right: 3.0rem; width: 1.875rem; height: 1.458rem; } } /* ======================================================== 　breadcrumbs =========================================================== */ #breadcrumbs { width: min(100%, 102.2rem); margin: 0 auto; padding: 0 3.5vw; } #breadcrumbs p { font-family: var(--kaku-font); font-size: 1.4rem; font-weight: 700; line-height: 2.0rem; letter-spacing: 1.0%; } #breadcrumbs a { color: var(--corp-color); text-decoration: underline; } #breadcrumbs i { position: relative; top: -0.1rem; margin: 0 0.5rem; font-size: 1.0rem; } /* ======================================================== 　pager =========================================================== */ .wp-pagenavi { display: flex; align-items: center; justify-content: center; margin-top: 5.0rem; } .wp-pagenavi a, .wp-pagenavi .current { display: inline-grid; place-content: center; width: 4.6rem; height: 4.6rem; margin: 0 0.5rem; background-color: rgba(244, 244, 244, 1.00); font-family: var(--heading-font); font-optical-sizing: auto; font-size: 2.0rem; } .wp-pagenavi a::after { content: none; } .wp-pagenavi a[class*="postslink"], .wp-pagenavi a.first, .wp-pagenavi a.last { color: var(--corp-color); background-color: transparent; } .wp-pagenavi .current { background-color: var(--corp-color); color: var(--white-color); } /* ======================================================== 　Scroll Top Button =========================================================== */ #scroll-top { visibility: hidden; display: flex; align-items: center; justify-content: center; position: fixed; inset: auto min(3.0vw, 3.0rem) min(3.0vw, 3.0rem) auto; background-color: color-mix(in srgb, var(--corp-color), transparent 50%); background-color: rgba(93, 143, 206, 0.50); width: min(10.0vw, 5.0rem); height: min(10.0vw, 5.0rem); border-radius: 50%; opacity: 0; z-index: 999; transition: 0.5s; } #scroll-top img { width: 100%; height: auto; } #scroll-top.active { visibility: visible; opacity: 1; } @media (min-width: 992px) { #scroll-top:hover { transform: scale(1.15); background-color: var(--corp-color); } } /* ======================================================== 　Preloader =========================================================== */ #preloader { position: fixed; inset: 0; background: var(--white-color); overflow: hidden; z-index: 999999; transition: 0.6s; } #preloader::before { position: fixed; top: calc(50% - 3.0rem); left: calc(50% - 3.0rem); width: 6.0rem; height: 6.0rem; border: 0.6rem solid var(--white-color); border-color: var(--corp-color) transparent var(--corp-color) transparent; border-radius: 50%; content: ""; animation: preloader 1.5s linear infinite; } /* ---- End of file --------------------------------------- */