@charset "UTF-8"; /* Grobal Selector */ /* ============================================ */ *, *::before, *::after { margin: 0; /* マージンは0に */ padding: 0; /* パディングも常に0に */ box-sizing: border-box; /* もちろん、より直感的なbox-sizingに設定 */ border-style: solid; border-width: 0; } /* Bug Fix */ /* ============================================ */ main { display: block; /* Render the `main` element consistently in IE. */ } details { display: block; /* Add the correct display in Edge, IE 10+, and Firefox. */ } summary { display: list-item; /* Add the correct display in all browsers. */ } textarea { overflow: auto; /* Remove the default vertical scrollbar in IE 10+. */ } input, textarea { -webkit-user-select: auto; /* Safari - solving issue when using user-select:none on the text input doesn't working */ } [type="number"] { -moz-appearance: textfield; /* Fix appearance for Firefox */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome. */ } [type="search"] { outline-offset: -2px; /* Correct the outline style in Safari. */ } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS. */ } ::-webkit-file-upload-button { -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari. */ font: inherit; /* Fix font inheritance. */ } :-moz-focusring { outline: auto; /* Improve outlines for Firefox and unify style with input elements & buttons. */ } select:disabled { opacity: inherit; /* Improve outlines for Firefox and unify style with input elements & buttons. */ } /* Styling & Fix */ /* ============================================ */ :where([hidden]:not([hidden='until-found'])) { display: none !important; /* hiddenは非表示を意味します */ } :where(html) { -webkit-text-size-adjust: none; /* iOSのランドスケープでテキストが調整されないようにする */ -webkit-tap-highlight-color: transparent; /* Remove gray overlay on links for iOS.*/ /*color-scheme: dark light;*/ /* ユーザーがダークテーマを好む場合、自動的にダークテーマになる */ } @supports not (min-block-size: 100dvb) { :where(html) { block-size: 100%; } } @media (prefers-reduced-motion: no-preference) { :where(html:focus-within) { scroll-behavior: smooth; /* 何かにフォーカスがある場合のみスムーズスクロール */ } } :where(body) { block-size: 100%; /* サファリ以外のブラウザのフォールバック */ block-size: 100dvb; /* 1dvbは動的ビューポートの長さの1%、100dvbで高さいっぱいに */ line-height: 1.5; /* アクセシブルな行の高さ */ font-family: system-ui, sans-serif; /* timeの代わりにシステムフォントを使用 */ -webkit-font-smoothing: antialiased; /* テキストのレンダリングを改善 */ } :where(input, button, textarea, select, optgroup) { font: inherit; /* フォームコントロールは親フォントを継承 */ color: inherit; /* カラーも継承 */ -webkit-appearance: none; /* Make form elements stylable across systems iOS especially. */ appearance: none; vertical-align: middle; background: transparent; padding: 0; margin: 0; border-radius: 0; text-align: inherit; text-transform: inherit; /* Inherit text-transform from parent. */ } :where(textarea) { resize: vertical; /* テキストエリアの水平リサイズを無効に */ resize: block; white-space: revert; /* revert the 'white-space' property for textarea elements on Safari */ } :where(progress) { vertical-align: baseline; /* vertical-align: baseline; */ } :where(meter) { -webkit-appearance: revert; /* minimum style to allow to style meter element */ appearance: revert; /* minimum style to allow to style meter element */ } :where(::placeholder) { color: unset; /* reset default text opacity of input placeholder */ } :where(button, label, select, summary, [type="button"], [type="reset"], [type="submit"], [role='button'], [role='option']) { cursor: pointer; /* インタラクティブなものにカーソルを合わせる */ } :where(:disabled) { cursor: not-allowed; /* フォームコントロール無効時のカーソルを許可しない */ } :where(label:has(> input:disabled), label:has(+ input:disabled)) { cursor: not-allowed; /* ラベルにもカーソルを許可しない */ } :where(button) { border-style: solid; /* ボタンのボーダーのスタイルを設定しやすくする */ } :where(a) { text-underline-offset: 0.2ex; /* 下線の上にスペースを追加する */ } :where(ul, ol, menu) { list-style: none; /* ビュレットを削除、必要に応じて手動で追加する */ } :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; /* 置換された要素をより予測可能にする */ vertical-align: bottom; } :where(img, picture, svg) { max-inline-size: 100%; /* images should never overflow past the available space */ block-size: auto; /* アスペクト比を保持 */ } :where(fieldset) { /* Reset to invisible */ margin: 0; padding: 0; min-width: 0; } :where(table) { border-color: inherit; /* Correct table border color inheritance in all Chrome and Safari. */ border-collapse: collapse; /* removes spacing between cells in tables */ } :where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; /* 長い単語は改行 */ } :where(h1, h2, h3) { line-height: calc(1em + 0.5rem); /* 見出しの行の高さを減らす */ } :where(address) { font-style: inherit; } :where(pre, code, kbd, samp) { font-family: monospace, monospace; /* Correct the inheritance and scaling of font size in all browsers. */ font-size: inherit; /* Correct the odd `em` font sizing in all browsers. */ } :where(abbr[title]) { text-decoration: underline dotted; /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ } :where(b, strong) { font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari. */ } :where(small) { font-size: 80%; /* Add the correct font size in all browsers. */ } :where(sub, sup) { /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } :where(sub) { bottom: -0.25em; } :where(sup) { top: -0.5em; } :where(hr) { /* より一貫性のある、スタイリッシュなhr */ border: none; border-block-start: 1px solid; color: inherit; block-size: 0; overflow: visible; /* Show the overflow in Edge and IE. */ box-sizing: content-box; /* Add the correct box sizing in Firefox. */ height: 0; /* Add the correct box sizing in Firefox. */ clear: both; } :where(:focus-visible) { /* より一貫性のある、カスタマイズ可能なフォーカスのアウトライン */ outline: 2px solid var(--focus-color, Highlight); outline-offset: 2px; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } :where([contenteditable]:focus) { outline: auto; /* Remove outline for editable content. */ } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } :where([hidden]) { display: none; /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ } /* .visually-hiddenは後のカスケードレイヤーを上書きするために!importantを使用 */ :where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) { clip-path: inset(50%) !important; height: 1px !important; width: 1px !important; overflow: hidden !important; position: absolute !important; white-space: nowrap !important; border: 0 !important; } /* Accessibility */ /* ============================================ */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media screen { /* Hide content from screens but not screenreaders */ [hidden~="screen"] { display: inherit; } [hidden~="screen"]:not(:active):not(:focus):not(:target) { position: absolute !important; clip: rect(0 0 0 0) !important; } } [disabled] { cursor: not-allowed; } [aria-busy="true"] { /* Specify the progress cursor of updating elements */ cursor: progress; } [aria-controls] { /* Specify the pointer cursor of trigger elements */ cursor: pointer; } [aria-disabled] { /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */ cursor: default; } [role='application'], [role='tabpanel'], [role='dialog'] { display: block; } [aria-hidden='false'] { display: block; } [aria-hidden="true"] { display: none; } [aria-modal='true'] { overflow-y: auto; box-sizing: border-box; max-height: 100vh; } :focus:not(:focus-visible) { outline: none; } /*[ Visually Hidden ]----------------------------------------------------------------*/ [data-screenreader], .visually-hidden { /** * Makes elements visually invisible but still accessible to screen-readers. * * This Css has been carefully tested to ensure screen-readers can read and * activate (in case of links and buttons) the elements with this class. Please * use caution when changing anything, even seemingly safe ones. For example * changing width from 1 to 0 would prevent TalkBack from activating (clicking) * buttons despite TalkBack reading them just fine. This is because * element needs to have a defined size and be on viewport otherwise TalkBack * does not allow activation of buttons. */ position: fixed !important; /* keep it on viewport */ top: 0px !important; left: 0px !important; /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels before allowing buttons to be activated. */ width: 4px !important; height: 4px !important; /* visually hide it with overflow and opacity */ opacity: 0 !important; overflow: hidden !important; /* remove any margin or padding */ border: none !important; margin: 0 !important; padding: 0 !important; /* ensure no other style sets display to none */ display: block !important; visibility: visible !important; } /*[ Fix Flash Of Unstyled Text (FOUT) ]----------------------------------------------------------------*/ /* html { visibility: hidden; } html.wf-active, html.loading-delay { visibility: visible; } */ /*[ Page Layout Setting ]----------------------------------------------------------------*/ body { block-size: 100% !important; min-height: 100dvh; } /*[ Sticky Guide ]----------------------------------------------------------------*/ hr[data-sticky-guide] { height: 1px; border: none; } /*[ Text Decoration ]----------------------------------------------------------------*/ b, i { font-weight: inherit; font-style: normal; } /*[ dialog Setting ]----------------------------------------------------------------*/ [data-component="modalContents"] { display: none; overflow: scroll; position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; margin: 0; padding: 2em; } @media screen and (max-width: 768px) { [data-component="modalContents"] { height: auto; } } [data-component="modalContents"][aria-modal="true"] { display: grid; place-items: center; } [data-component="modalContents"]>[data-trigger="closeModal"] { position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; margin: 0; padding: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } [data-component="modalContents"] [data-component="modalBody"] { position: relative; z-index: 150; aspect-ratio: 16 / 9; width: 100%; } [data-component="modalContents"] [data-component="modalBody"] iframe { width: 100%; height: 100%; } [data-component="modalContents"]>menu { position: fixed; top: 12px; right: 12px; z-index: 110; display: block; height: 40px; width: 40px; } @media screen and (max-width: 768px) { [data-component="modalContents"]>menu { top: 8px; right: 8px; } } [data-component="modalContents"]>menu>li { display: block; height: 100%; width: 100%; } [data-component="modalContents"]>menu>li>[data-trigger] { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } /*[ Common Setting ]----------------------------------------------------------------*/ /*:: Document ::*/ html { font-size: 16px; /* = 1rem */ } :where(body) { block-size: 100%; /* サファリ以外のブラウザのフォールバック */ } body { /*font-family: 'Roboto', 'Noto Sans JP', sans-serif;*/ font-family: 'Noto Sans JP', sans-serif; font-style: normal; font-size: 1rem; font-weight: 400; line-height: 1; letter-spacing: 0; color: black; } /*:: Imposing Text ::*/ em { font-weight: 500; } strong { font-weight: 700; } mark { background: #F9D348; } /*:: Headings ::*/ h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: 700; line-height: 1.4; } /*[ Standard Paragraph ]----------------------------------------------------------------*/ /*[ Text Links ]----------------------------------------------------------------*/ a[href] { transition: color 0.1s; color: black; text-decoration: none; } /* a[href]:visited{ color: black; text-decoration: none; } */ a[href]:hover { color: #F16522; text-decoration: none; } a[href]:active { color: #F16522; text-decoration: none; } /*[ Form Text ]----------------------------------------------------------------*/ /* 旧Edge/IE対応 */ ::placeholder, ::-ms-input-placeholder, :-ms-input-placeholder { color: #D5D5D5; } form { display: block; } form textarea, form input[type="text"], form input[type="search"], form input[type="tel"], form input[type="email"], form input[type="date"], form input[type="number"], form select { background: white; padding: 0.5em 1em; margin: 0.5em 0; display: inline-block; border: 2px solid #E6E6E6; } form input[type='number']::-webkit-outer-spin-button, form input[type='number']::-webkit-inner-spin-button, form input[type='number'] { -webkit-appearance: none; -moz-appearance: textfield !important; } form input[type="date"] { cursor: pointer; } form input[type="radio"] { transition: 0.2s all linear; appearance: none; border-radius: 50%; width: 1em; height: 1em; border: 2px solid #E6E6E6; margin-right: 5px; position: relative; background: white; } form input[type="radio"]:checked { border: 0.25em solid #F16522; background: white; } form select { background: white url(/wp-content/themes/phase5_231110/assets/img/ui_select_arrow.svg) no-repeat right 8px center; background-size: 10px; padding: 0.5em 2em 0.5em 1em; } @media screen and (max-width: 800px) { form select { padding: 0.5em 1.5em 0.5em 0.5em; } } [data-screenreader], .visually-hidden { position: fixed !important; top: 0px !important; left: 0px !important; width: 4px !important; height: 4px !important; opacity: 0 !important; overflow: hidden !important; border: none !important; margin: 0 !important; padding: 0 !important; display: block !important; visibility: visible !important; } [data-component="search"] { position: relative; display: grid; place-items: center; } [data-component="search"] input[type="search"] { width: 100%; height: 2rem; height: 32px; margin: 0; padding: 0 0.5em 0 2.5em; border: none; background: #EFEFEF; display: flex; align-items: center; font-size: 0.8em; } [data-component="search"] button[type="submit"] { border: none; position: absolute; top: 0; left: 0; height: 2em; width: 2em; background: url(../images/common/icon_button_search.svg) no-repeat center center / 1em; } .container { block-size: 100% !important; min-height: 100dvh; } #globalHeader { transition: all 0.3s; position: sticky; z-index: 25; top: 0; width: 100%; padding: 0; border-bottom: 4px solid #F9D348; background: white; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); display: grid; grid-template-columns: 1fr auto; grid-template-rows: 5em auto; column-gap: 2em; row-gap: 0; place-items: center start; grid-template-areas: "logo nav" "megaMenu megaMenu"; } #globalHeader>[itemprop="logo"] { grid-area: logo; padding: 0 0 0 1em; } #globalHeader>[itemprop="logo"] a { display: block; } #globalHeader>[itemprop="logo"] img { height: 2.5em; } #globalHeader>[itemprop="nav"] { grid-area: nav; height: 100%; } #globalHeader>[itemprop="nav"]>ul { height: 100%; width: 100%; margin: 0 0 0 auto; display: flex; justify-content: end; align-items: center; } #globalHeader>[itemprop="nav"]>ul>li { height: 100%; display: grid; place-items: center; letter-spacing: 0; } #globalHeader>[itemprop="nav"] [itemprop="search"] { max-width: 16em; } #globalHeader>[itemprop="nav"] [itemprop="faq"] { padding: 0 1.5em 0 1em; } #globalHeader>[itemprop="nav"] [itemprop="faq"] a { transition: opacity 0.3s; width: 5em; height: 2.5em; background: rgb(241, 101, 34); display: grid; place-items: center; color: white; font-size: 1em; font-weight: 500; letter-spacing: 0.15em; border-radius: 1.25em; } #globalHeader>[itemprop="nav"] [itemprop="faq"] a:hover { opacity: 0.5; } #globalHeader>[itemprop="nav"] [itemprop="address"] a { transition: opacity 0.3s; height: 100%; width: 10em; padding: 0.5em; background: #79A1C9; display: grid; place-items: center; color: white; font-size: 1.1em; font-weight: 700; } #globalHeader>[itemprop="nav"] [itemprop="address"] a:hover { opacity: 0.5; } #globalHeader>[itemprop="nav"] [itemprop="mobileMenu"] { display: none; } #switchMobileMenu { display: grid; place-items: center; height: 100%; width: 64px; font-size: 2em; line-height: 1; color: black; text-decoration: none; } #switchMobileMenu[aria-checked="false"] .on, #switchMobileMenu[aria-checked="true"] .off { display: none; } #switchMobileMenu[aria-checked="false"] .off, #switchMobileMenu[aria-checked="true"] .on { display: inline; } #globalHeader>[itemprop="megaMenu"], #globalHeader>[itemprop="megaMenu"]>[data-component="mobileMenuWidget"] { display: none; } #globalHeader>[itemprop="megaMenu"] { grid-area: megaMenu; width: 100%; box-shadow: inset 0 0px 10px rgba(0, 0, 0, 0.1); display: block; } #globalHeader>[itemprop="megaMenu"]>menu { position: relative; z-index: 10; width: 100%; display: grid; place-items: center; grid-template-columns: repeat(3, 1fr); grid-template-rows: 3.5em; column-gap: 0; row-gap: 0; } #globalHeader>[itemprop="megaMenu"]>menu>li { width: 100%; height: 100%; } #globalHeader>[itemprop="megaMenu"]>menu>li+li { border-left: 1px solid #E6E6E6; } #globalHeader>[itemprop="megaMenu"]>menu>li>button { position: relative; width: 100%; height: 100%; padding: 0.5em 3em 0.5em 1em; display: flex; align-items: center; justify-content: center; } #globalHeader>[itemprop="megaMenu"]>menu>li>button[aria-pressed="true"], #globalHeader>[itemprop="megaMenu"]>menu>li>button:hover { background: #F16522; color: white; } #globalHeader>[itemprop="megaMenu"]>menu>li>button::before { position: absolute; top: calc(50% - 1.2em / 2); right: 1em; height: 1.2em; width: 1.2em; margin: 0 0.25em 0 0; display: block; content: ''; background: url(../images/common/icon_megamenu_arrow.svg) no-repeat center center / contain; } #globalHeader>[itemprop="megaMenu"]>menu>li>button>b { font-size: 1em; font-weight: 700; letter-spacing: 0.05em; } #globalHeader>[itemprop="megaMenu"]>menu>li>button>i { height: 1.5em; width: 1.5em; margin: 0 1em 0 0; } #globalHeader>[itemprop="megaMenu"]>menu>li>button>i img { width: 100%; height: 100%; } #globalHeader>[itemprop="megaMenu"]>menu>li>button>i .off { display: block; } #globalHeader>[itemprop="megaMenu"]>menu>li>button>i .on { display: none; } #globalHeader>[itemprop="megaMenu"]>menu>li>[role="dialog"] { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; padding: 4em 2em; background: #F7F4D7; overflow-y: auto; } #globalHeader>[itemprop="megaMenu"]>menu>li>[role="dialog"][aria-hidden="true"] { display: none; } #globalHeader>[itemprop="megaMenu"]>menu>li>[role="dialog"][aria-hidden="false"] { display: block; } [data-component="fxEscapeMenu"] { position: absolute; top: 1.25em; right: 2em; } [data-component="fxEscapeMenu"] button { transition: opacity 0.3s; position: relative; padding: 0.25em 2em 0.25em 1.25em; height: 2em; border-radius: 1em; background: #F16522; display: grid; place-items: center; color: white; font-size: 0.75em; font-weight: 500; letter-spacing: 0.1em; } [data-component="fxEscapeMenu"] button:hover { opacity: 0.5; } [data-component="fxEscapeMenu"] button::before { position: absolute; top: calc(50% - 0.65em / 2); right: 1em; height: 0.65em; width: 0.65em; display: block; content: ''; background: url(../images/common/icon_escape.svg) no-repeat center center / contain; } #globalHeader [itemprop=megaMenu][aria-hidden=false], #globalHeader [itemprop=megaMenu][aria-hidden=false] { height: calc(100vh - 66px); height: calc(100svh - 66px) } /*[ Website Footer ]----------------------------------------------------------------*/ #globalFooter { position: relative; border-top: 1px solid #E6E6E6; } #globalFooter>address { display: block; padding: 0.5em 1em; background: #F9D348; font-size: 0.75em; line-height: 1; letter-spacing: 0.1em; text-align: center; } #globalFooter>menu { max-width: 960px; margin: 0 auto; padding: 1.5em 1em; display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: 1fr; column-gap: 2em; row-gap: 0; place-items: center start; grid-template-areas: "logo . ."; } #globalFooter [itemprop="Logo"] { grid-area: logo; max-width: 16em; } #globalFooter [itemprop="Logo"] img { width: 100%; } #globalFooter [itemprop="siteLink"]>a { letter-spacing: 0.1em; font-size: 0.9em; } #globalFooter [itemprop="siteLink"]>a::before { display: inline-block; vertical-align: middle; content: ''; background: url(../images/common/icon_list_arrow.svg) no-repeat center center / contain; height: 1em; width: 1em; margin: 0 0.25em 0 0; } /* :: cardMenu :: */ [data-component="cardMenu"] { position: relative; width: calc(100% - 4em); max-width: 960px; margin: 3em auto 0 auto; padding: 0 0 5em 0; display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; } [data-component="cardMenu"]::before { content: ''; position: absolute; display: block; height: 100%; width: 100vw; z-index: -1; background: #F7F4D7; border-top: 10em solid white; } [data-component="cardMenu"]::after { content: ''; position: absolute; bottom: 0; right: calc(100% - 12em); display: block; height: 16em; width: 12em; background: url(../images/common/cardmenu_bg_anm.png) no-repeat bottom center; background-size: contain; z-index: 1; } [data-component="fxButton"] { position: relative; display: grid; place-items: center; background: #F16522; color: white; text-decoration: none; font-size: 1em; font-weight: 600; line-height: 1; letter-spacing: 0.15em; padding: 0.25em 1.25em; height: 40px; border-radius: 20px; transition: opacity 0.3s; } [data-component="fxButton"]:hover { opacity: 0.5; } [data-component="buttonNav"] { margin: 0 auto; display: flex; justify-content: center; align-items: center; } [data-component="buttonNav"]>li { margin: 0 0.5em; } [data-component="buttonNav"]>li>a, [data-component="buttonNav"]>li>button { position: relative; width: 100%; min-width: 18em; height: 4em; padding: 0 3em 0 2em; background: #F16522; border-radius: 40px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1em; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; text-align: center; } [data-component="buttonNav"]>li>.download { background: #79A1C9; font-size: 0.9em; } [data-component="buttonNav"]>li>.return { padding: 0 2em 0 3em; background: #F16522; } [data-component="buttonNav"]>li>a:hover, [data-component="buttonNav"]>li>button:hover { color: white; } [data-component="cardLinkMenu"] { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1em; grid-auto-rows: auto; row-gap: 1em; place-items: start center; } [data-component="cardLinkMenu"]>li { position: relative; width: 100%; height: auto; } [data-component="cardLinkMenu"]>li>[itemscope] { position: relative; width: 100%; height: 100%; min-height: 3em; padding: 1em 3em 1em 1em; display: grid; grid-template-columns: auto 1fr; column-gap: 0.5em; place-items: center start; background: white; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16); } [data-component="cardLinkMenu"]>li>a[itemscope]::after { content: ''; position: absolute; bottom: calc(50% - 0.9em / 2); right: 1em; display: block; height: 0.9em; width: 0.9em; background: url(../images/common/icon_list_arrow.svg) no-repeat bottom center; background-size: contain; } [data-component="cardLinkMenu"]>li>button[itemscope]::after { position: absolute; content: ''; top: calc(50% - 0.5em / 2); right: 1.2em; height: 0.5em; width: 0.5em; border-top: 2px solid #F16522; border-right: 2px solid #F16522; border-bottom: none; border-left: none; transform: rotate(135deg); } [data-component="cardLinkMenu"]>li>button[itemscope][aria-expanded="true"]::after { transform: rotate(-45deg); } [data-component="cardLinkMenu"]>li>[itemscope] [itemprop="icon"] { height: 2em; width: 2em; place-self: center; display: grid; place-items: center; } [data-component="cardLinkMenu"]>li>[itemscope] [itemprop="text"] { font-size: 0.8em; font-weight: 500; letter-spacing: 0.05em; line-height: 1.25; text-align: left; word-break: keep-all; overflow-wrap: anywhere; } [data-component="cardLinkMenu"] [role="dialog"] { position: relative; background: white; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16); padding: 1.5em 1em; width: 100%; } [data-component="cardLinkMenu"] [role="dialog"]>li { display: block; width: 100%; padding: 0; } [data-component="cardLinkMenu"] [role="dialog"]>li+li { margin: 1em 0 0 0; } [data-component="cardLinkMenu"] [role="dialog"]>li>a { display: block; width: 100%; padding: 0 0 0 1.5em; position: relative; font-size: 0.75em; font-weight: 500; letter-spacing: 0.05em; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; } [data-component="cardLinkMenu"] [role="dialog"]>li>a::before { content: ''; position: absolute; top: 0.125em; left: 0; display: block; height: 1em; width: 1em; background: url(../images/common/icon_list_arrow.svg) no-repeat bottom center; background-size: contain; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"] { margin: 2.5em auto 0 auto; grid-template-columns: repeat(4, 1fr); column-gap: 0.75em; grid-auto-rows: minmax(70px, auto); row-gap: 0.75em; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope] { padding: 0.5em 2.5em 0.5em 1em; display: grid; grid-template-columns: 1.5em 1fr; column-gap: 0.5em; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope]::before { right: 1em; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope]::after { right: calc(1em + 0.35em); } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope] [itemprop="icon"] { height: 1.5em; width: 1.5em; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope] [itemprop="text"] { font-size: 0.75em; letter-spacing: 0; } @media screen and (max-width: 960px) { #globalHeader>[itemprop="nav"] [itemprop="search"] { max-width: 14em; } #globalHeader>[itemprop="nav"] [itemprop="faq"] { padding: 0 1em 0 0.75em; } #globalHeader>[itemprop="nav"] [itemprop="faq"] a { width: 4.5em; color: white; font-size: 0.9em; } #globalHeader>[itemprop="nav"] [itemprop="address"] a { width: 9em; padding: 0.25em; font-size: 1em; } } @media screen and (max-width: 768px) { #globalHeader { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16); grid-template-columns: 1fr 4em; column-gap: 1em; grid-template-rows: 4em; grid-template-areas: "logo nav"; } #globalHeader>[itemprop="logo"] { grid-area: logo; padding: 0 0 0 1em; } #globalHeader>[itemprop="logo"] a {} #globalHeader>[itemprop="logo"] img { height: 2em; } #globalHeader>[itemprop="nav"] [itemprop="search"], #globalHeader>[itemprop="nav"] [itemprop="faq"], #globalHeader>[itemprop="nav"] [itemprop="address"] { display: none; } #globalHeader>[itemprop="nav"] [itemprop="mobileMenu"] { display: grid; } #globalHeader>[itemprop="megaMenu"] { display: none; } #globalHeader [itemprop="megaMenu"][aria-hidden="true"], #globalHeader [itemprop="megaMenu"][aria-hidden="true"] { display: none; } #globalHeader [itemprop="megaMenu"][aria-hidden="false"], #globalHeader [itemprop="megaMenu"][aria-hidden="false"] { display: grid; grid-template-rows: 1fr; grid-template-rows: auto 1fr; place-items: start; overflow: scroll; position: fixed; z-index: 100; top: 66px; right: 0; bottom: 0; left: 0; width: 100vw; height: calc(100vh - 66px); margin: 0; padding: 0; background: #F7F4D7; } #globalHeader [itemprop="megaMenu"] [data-component="mobileMenuWidget"] { display: block; background: white; width: 100%; padding: 1.5em 1em; } #globalHeader [itemprop="megaMenu"] [data-component="mobileMenuWidget"]>ul { max-width: 320px; margin: 0 auto; display: grid; grid-template-columns: 2fr 3fr; column-gap: 0.75em; grid-template-rows: auto; row-gap: 1em; grid-template-areas: "search search" "faq address"; } [data-component="mobileMenuWidget"]>ul [itemprop="search"] { grid-area: search; } [data-component="mobileMenuWidget"]>ul [itemprop="search"] [type="search"] { width: 100%; padding: 0 0.8rem 0 4rem; height: 2.5rem; height: 4rem; } [data-component="mobileMenuWidget"]>ul [itemprop="search"] button[type="submit"] { height: 4rem; width: 4rem; } [data-component="mobileMenuWidget"]>ul [itemprop="faq"] { grid-area: faq; } [data-component="mobileMenuWidget"]>ul [itemprop="faq"]>a { color: white; transition: opacity 0.3s; font-size: 1em; font-weight: 500; letter-spacing: 0.15em; line-height: 1; } [data-component="mobileMenuWidget"]>ul [itemprop="address"] { grid-area: address; } [data-component="mobileMenuWidget"]>ul [itemprop="address"]>a { transition: opacity 0.3s; background: #79A1C9; color: white; font-size: 1em; font-weight: 500; letter-spacing: 0.1em; line-height: 1; } #globalHeader [itemprop="megaMenu"]>menu { position: relative; z-index: 150; grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-rows: auto; place-items: start; } #globalHeader [itemprop="megaMenu"]>menu>li { width: 100%; height: auto; border-bottom: 3px solid white; border-left: none; } #globalHeader [itemprop="megaMenu"]>menu>li>button { display: grid; grid-template-columns: auto 1fr; column-gap: 0.5em; place-items: center start; height: auto; width: 100%; padding: 1em 2em 1em 2em; } #globalHeader [itemprop="megaMenu"]>menu>li>button>b { font-size: 1em; letter-spacing: 0.1em; font-weight: 500; } #globalHeader [itemprop="megaMenu"]>menu>li>button>i { margin: 0; height: 1.75em; width: 1.75em; } #globalHeader [itemprop="megaMenu"]>menu>li:nth-of-type(3)>button>i { height: 1.75em; width: 1.75em; } #globalHeader [itemprop="megaMenu"]>menu>li>button>i .off { display: none; } #globalHeader [itemprop="megaMenu"]>menu>li>button>i .on { display: block; } #globalHeader [itemprop="megaMenu"]>menu>li>[role="dialog"][aria-hidden="false"] { position: relative; top: 0; background: none; padding: 0; } #globalHeader [itemprop="megaMenu"]>menu>li>[role="dialog"][aria-hidden="true"] { display: none; } #globalHeader [itemprop="megaMenu"]>menu>li>[role="dialog"] [data-component="fxEscapeMenu"] { display: none; } #globalHeader [itemprop="megaMenu"]>menu>li>button[aria-pressed="true"] { background: none; color: black; } #globalHeader [itemprop="megaMenu"]>menu>li>button[aria-pressed="false"]::before { position: absolute; right: 1.5em; content: ''; display: block; border-top: 3px solid #F16522; border-right: 3px solid #F16522; height: 0.66em; width: 0.66em; transform: rotate(135deg); background: none; top: calc(50% - 0.33em); } #globalHeader [itemprop="megaMenu"]>menu>li>button[aria-pressed="false"]::after { content: none; } #globalHeader [itemprop="megaMenu"]>menu>li>button[aria-pressed="true"]::before { position: absolute; right: 1.5em; top: calc(50% - 0.01em); content: ''; display: block; border-top: 3px solid #F16522; border-right: 3px solid #F16522; height: 0.66em; width: 0.66em; transform: rotate(-45deg); background: none; } #globalHeader [itemprop="megaMenu"]>menu>li>button[aria-pressed="true"]::after { content: none; } [data-component="cardLinkMenu"] { margin: 0; padding: 1.25em 2em; border-top: 3px solid white; grid-template-columns: 1fr; column-gap: 0; grid-auto-rows: auto; row-gap: 0.5em; place-items: start; } [data-component="cardLinkMenu"]>li { max-width: 400px; margin: 0 auto; } [data-component="cardLinkMenu"]>li>[itemscope] { height: auto; padding: 1em 3em 1em 1em; grid-template-columns: 2em 1fr; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16); } [data-component="cardLinkMenu"]>li>[itemscope]:hover { color: #F16522; } [data-component="cardLinkMenu"]>li>a[itemscope]::before { content: ''; position: absolute; bottom: calc(50% - 1em / 2); right: 1em; display: block; height: 1em; width: 1em; background: url(../images/common/icon_list_arrow.svg) no-repeat bottom center; background-size: contain; } [data-component="cardLinkMenu"]>li>a[itemscope]::after { content: none; } [data-component="cardLinkMenu"]>li>button[itemscope]::before { content: none; } [data-component="cardLinkMenu"]>li>button[itemscope]::after { position: absolute; content: ''; top: calc(50% - 0.6em / 2); right: 1.25em; height: 0.6em; width: 0.6em; border-top: 2px solid #F16522; border-right: 2px solid #F16522; border-bottom: none; border-left: none; transform: rotate(135deg); } [data-component="cardLinkMenu"]>li>button[itemscope][aria-expanded="true"]::after { transform: rotate(-45deg); } [data-component="cardLinkMenu"]>li>[itemscope] [itemprop="icon"] { height: 100%; width: 100%; display: grid; place-items: center; } [data-component="cardLinkMenu"]>li>[itemscope] [itemprop="text"] { font-size: 0.85em; font-weight: 500; letter-spacing: 0.1em; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; } [data-component="cardLinkMenu"] [role="dialog"] { position: relative; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16); padding: 1.5em; width: 100%; } [data-component="cardLinkMenu"] [role="dialog"]::before { position: absolute; content: ""; display: block; top: 0; left: 0; height: 2px; width: calc(100% - 2em); margin: 0 1em; background: #F0F0F0; } [data-component="cardLinkMenu"] [role="dialog"]>li { display: block; width: 100%; padding: 0; } [data-component="cardLinkMenu"] [role="dialog"]>li+li { margin: 1em 0 0 0; } [data-component="cardLinkMenu"] [role="dialog"]>li>a { display: block; width: 100%; padding: 0 0 0 1.25em; position: relative; font-size: 0.8em; font-weight: 500; letter-spacing: 0.05em; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; } [data-component="cardLinkMenu"] [role="dialog"]>li>a::before { content: ''; position: absolute; top: 0.25em; left: 0; display: block; height: 1em; width: 1em; background: url(../images/common/icon_list_arrow.svg) no-repeat bottom center; background-size: contain; } [data-component="cardLinkMenu"] [role="dialog"]>li>a::after { content: none; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"] { margin: 0 auto; padding: 0 2em 3em 2em; grid-template-columns: 1fr; column-gap: 0; grid-auto-rows: auto; row-gap: 0.33em; border-top: none; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope] { padding: 0.75em 2.5em 0.75em 1em; display: grid; grid-template-columns: 2em 1fr; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope]::before { right: 1em; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope] [itemprop="text"] { font-size: 0.8em; font-weight: 500; letter-spacing: 0.05em; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; } #globalHeader [itemprop="megaMenu"]>menu>li>button[aria-pressed="true"] { background: none; color: black; } [data-component="cardLinkMenu"] { margin: 0; padding: 1.25em 2em; border-top: 3px solid white; grid-template-columns: 1fr; column-gap: 0; grid-auto-rows: auto; row-gap: 0.5em; place-items: start; } [data-component="cardLinkMenu"]>li { max-width: 400px; margin: 0 auto; } [data-component="cardLinkMenu"]>li>[itemscope] { height: auto; padding: 1em 3em 1em 1em; grid-template-columns: 2em 1fr; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16); } [data-component="cardLinkMenu"]>li>[itemscope]:hover { color: #F16522; } [data-component="cardLinkMenu"]>li>a[itemscope]::before { content: ''; position: absolute; bottom: calc(50% - 1em / 2); right: 1em; display: block; height: 1em; width: 1em; background: url(../images/common/icon_list_arrow.svg) no-repeat bottom center; background-size: contain; } [data-component="cardLinkMenu"]>li>a[itemscope]::after { content: none; } [data-component="cardLinkMenu"]>li>button[itemscope]::before { content: none; } [data-component="cardLinkMenu"]>li>button[itemscope]::after { position: absolute; content: ''; top: calc(50% - 0.6em / 2); right: 1.25em; height: 0.6em; width: 0.6em; border-top: 2px solid #F16522; border-right: 2px solid #F16522; border-bottom: none; border-left: none; transform: rotate(135deg); } [data-component="cardLinkMenu"]>li>button[itemscope][aria-expanded="true"]::after { transform: rotate(-45deg); } [data-component="cardLinkMenu"]>li>[itemscope] [itemprop="icon"] { height: 100%; width: 100%; display: grid; place-items: center; } [data-component="cardLinkMenu"]>li>[itemscope] [itemprop="text"] { font-size: 0.85em; font-weight: 500; letter-spacing: 0.1em; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; } [data-component="cardLinkMenu"] [role="dialog"] { position: relative; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.16); padding: 1.5em; width: 100%; } [data-component="cardLinkMenu"] [role="dialog"]::before { position: absolute; content: ""; display: block; top: 0; left: 0; height: 2px; width: calc(100% - 2em); margin: 0 1em; background: #F0F0F0; } [data-component="cardLinkMenu"] [role="dialog"]>li { display: block; width: 100%; padding: 0; } [data-component="cardLinkMenu"] [role="dialog"]>li+li { margin: 1em 0 0 0; } [data-component="cardLinkMenu"] [role="dialog"]>li>a { display: block; width: 100%; padding: 0 0 0 1.25em; position: relative; font-size: 0.8em; font-weight: 500; letter-spacing: 0.05em; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; } [data-component="cardLinkMenu"] [role="dialog"]>li>a::before { content: ''; position: absolute; top: 0.25em; left: 0; display: block; height: 1em; width: 1em; background: url(../images/common/icon_list_arrow.svg) no-repeat bottom center; background-size: contain; } [data-component="cardLinkMenu"] [role="dialog"]>li>a::after { content: none; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"] { margin: 0 auto; padding: 0 2em 3em 2em; grid-template-columns: 1fr; column-gap: 0; grid-auto-rows: auto; row-gap: 0.33em; border-top: none; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope] { padding: 0.75em 2.5em 0.75em 1em; display: grid; grid-template-columns: 2em 1fr; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope]::before { right: 1em; } [data-component="cardLinkMenu"]+[data-component="cardLinkMenu"]>li>[itemscope] [itemprop="text"] { font-size: 0.8em; font-weight: 500; letter-spacing: 0.05em; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; } button { background-color: transparent; border: none; cursor: pointer; outline: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } } @media screen and (max-width: 640px) { #globalFooter menu { max-width: 320px; line-height: 1.34; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); column-gap: 1em; row-gap: 1em; place-items: center; grid-template-areas: "logo logo" ". ."; } #globalFooter>address { font-size: 0.5em; letter-spacing: 0.05em; } #globalFooter [itemprop="siteLink"]>a { font-size: 0.8em; } #globalFooter [itemprop="siteLink"]>a::before { vertical-align: -1px; } }