@charset "UTF-8"; /** * Fonts * ======================================= */ /* cyrillic-ext */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/oswald-v49-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/oswald-v49-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/oswald-v49-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/oswald-v49-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/oswald-v49-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /** * Foundation * ======================================= */ /* Foundation/Reset * ---------------------------- */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *, .free-html-markup *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* 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; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } @keyframes splide-loading { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .splide__track--fade > .splide__list > .splide__slide { margin: 0 !important; opacity: 0; z-index: 0; } .splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1; } .splide--rtl { direction: rtl; } .splide__track--ttb > .splide__list { display: block; } .splide__container { box-sizing: border-box; position: relative; } .splide__list { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; pointer-events: none; } .splide__pagination li { display: inline-block; line-height: 1; list-style-type: none; margin: 0; pointer-events: auto; } .splide:not(.is-overflow) .splide__pagination { display: none; } .splide__progress__bar { width: 0; } .splide { position: relative; visibility: hidden; } .splide.is-initialized, .splide.is-rendered { visibility: visible; } .splide__slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative; } .splide__slide img { vertical-align: bottom; } .splide__spinner { animation: splide-loading 1s infinite linear; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; bottom: 0; contain: strict; display: inline-block; height: 20px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 20px; } .splide__sr { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .splide__toggle__pause { display: none; } .splide__toggle.is-active .splide__toggle__play { display: none; } .splide__toggle.is-active .splide__toggle__pause { display: inline; } .splide__track { overflow: hidden; position: relative; z-index: 0; } /* Foundation/Variables * ---------------------------- */ :root { /* font */ --font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; --font-family-hdg: "Oswald", "Lucida Grande", sans-serif; --font-size-default: 16px; /* color */ --color-main: #4b1e78; --color-main-disabled: #8060a0; --color-bg-default: #fff; --color-bg-box: #eee; --color-bg-table-td: #fff; --color-bg-table-th: #eee; --color-bg-table-th-em: #ccc; --color-btn: #d6a4ea; --color-font-default: #333; --color-font-default-disabled: #6f6f6f; --color-font-sub: #666; --color-placeholder: #6f6f6f; --color-icon: #eee; --color-icon-discontinued: #474a4c; --color-icon-new: #a94442; --color-line: #ccc; --color-line-input-box: #949494; --color-table-current: #f5f3f8; --color-white: #fff; --color-black: #333; --color-text-gray: #707070; --color-box-shadow: rgba(25, 29, 31, .1); --color-disabled-text: #696969; --color-disabled-line: #6f6f6f; /* width */ --width-max-content: 1200px; --width-max-form-content: 800px; /* opacity */ --opacity-images: .7; /* transition */ --transition-duration: .3s; /* z-index */ --zindex-overlay: 7000; --zindex-header: 5200; --zindex-header-overlay: 5100; --zindex-header-products: 5000; --zindex-fixed-link: 3000; --zindex-to-pagetop: 2000; --zindex-layer4: 20; --zindex-layer3: 15; --zindex-layer2: 10; --zindex-layer1: 5; --zindex-default: 0; --zindex-behind: -1; /* js */ --js-scrollbar-width: 0; --js-header-height: 0; --js-nav-height: 0; } /* Foundation/Base * ---------------------------- */ html { scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.5; font-family: var(--font-family); font-size: var(--font-size-default); color: var(--color-font-default); } @media only screen and (max-width: 768px) { body:has(.l-nav-fixed-menu) { padding-bottom: 58px; } } @media only screen and (min-width: 769px) { body { overflow-x: hidden; overflow-y: scroll; } } body.is-fixed { overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-hdg); } a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } a, button, input, select, textarea, [tabindex="0"] { outline: revert; } button:not([disabled]) { cursor: pointer; } img { height: auto; } table, th, td { border-collapse: collapse; text-align: left; } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } input { -webkit-appearance: none; appearance: none; border: 0; color: inherit; font-size: inherit; margin: 0; max-width: 100%; padding: 0; vertical-align: middle; } input:disabled { cursor: not-allowed; } label { display: block; } :target { scroll-margin-top: calc(var(--js-header-height) + var(--js-nav-height)); } ::placeholder { color: var(--color-placeholder); opacity: 1; } /** * Layout * ======================================= */ /* Structure * ---------------------------- */ .last-margin { margin-top: 5rem; } @media only screen and (min-width: 769px) { .last-margin { margin-top: 6.25rem; } } /* .l-main > .l-wrapper:last-child { padding-bottom: 5rem; } @media only screen and (min-width: 769px) { .l-main > .l-wrapper:last-child { padding-bottom: 6.25rem; } } */ .l-main > .l-wrapper:last-child .l-inner > :last-child { margin-bottom: 0; } .l-wrapper { padding-left: 1rem; padding-right: 1rem; } @media only screen and (min-width: 769px) { .l-wrapper { padding-left: 1.5rem; padding-right: 1.5rem; } } .l-inner { max-width: var(--width-max-content); margin-left: auto; margin-right: auto; } .l-inner--form { max-width: var(--width-max-form-content); } /* Backgound Color * ---------------------------- */ [class*=l-bg--] .l-wrapper:first-of-type { padding-top: 4rem; padding-bottom: 4rem; } @media only screen and (min-width: 769px) { [class*=l-bg--] .l-wrapper:first-of-type { padding-top: 4.5rem; padding-bottom: 4.5rem; } [class*=l-bg--] .l-wrapper:first-of-type .l-inner > :first-child { margin-top: 0; } [class*=l-bg--] .l-wrapper:first-of-type .l-inner > :last-child { margin-bottom: 0; } } [class*=l-bg--] + * { padding-top: 4rem; } @media only screen and (min-width: 769px) { [class*=l-bg--] + * { padding-top: 4.5rem; } } [class*=l-bg--] + .l-wrapper .l-inner > :first-child { margin-top: 0; } .l-bg--black { /* color */ --color-bg-default: #222; --color-font-default: #fff; --color-icon-discontinued: #737577; background-color: var(--color-bg-default); color: var(--color-font-default); } .l-bg--black .c-link:hover, .l-bg--black .c-link:active, .l-bg--black .c-link:focus-visible { filter: brightness(0) invert(1); } .l-bg--black .c-link--arrow::after { filter: brightness(0) invert(1); } .l-bg--black .c-link-icon { filter: brightness(0) invert(1); } .l-bg--black .c-button .c-link-icon { filter: revert; } .l-bg--black .c-list__item::before { filter: brightness(0) invert(1); } .l-bg--black .c-label:not([class*=c-label--]) { color: var(--color-black); } .l-bg--black .c-table { color: var(--color-black); } .l-bg--black .c-button-sns-tob { background-color: #585858; } .l-bg--black .c-form__input { color: var(--color-black); } .l-bg--black .c-form__select { color: var(--color-black); } .l-bg--black .c-form__textarea { color: var(--color-black); } .l-bg--black .c-form__item--bg-gray { color: var(--color-black); } .l-bg--black .p-box { color: var(--color-black); } .l-bg--black .p-box .c-list__item::before { filter: revert; } .l-bg--black .p-box-toggle__item { color: var(--color-black); } .l-bg--black .p-box-toggle__item .c-link { color: var(--color-black); } .l-bg--black .p-box-toggle__item .c-link:hover, .l-bg--black .p-box-toggle__item .c-link:active, .l-bg--black .p-box-toggle__item .c-link:focus-visible { filter: revert; } .l-bg--black .p-box-toggle__item .c-link--arrow::after { filter: revert; } .l-bg--black .p-heading-toggle__btn:hover, .l-bg--black .p-heading-toggle__btn:active, .l-bg--black .p-heading-toggle__btn:focus-visible { color: var(--color-white); border-bottom-color: var(--color-white); } .l-bg--black .p-panel-banner__link-item--arrow::after { filter: brightness(0) invert(1); } .l-bg--black .p-panel-news-02__wrap:hover .p-panel-news-02__title, .l-bg--black .p-panel-news-02__wrap:hover .p-panel-news-02__text, .l-bg--black .p-panel-news-02__wrap:active .p-panel-news-02__title, .l-bg--black .p-panel-news-02__wrap:active .p-panel-news-02__text, .l-bg--black .p-panel-news-02__wrap:focus-visible .p-panel-news-02__title, .l-bg--black .p-panel-news-02__wrap:focus-visible .p-panel-news-02__text { filter: brightness(0) invert(1); } .l-bg--black .p-panel-introduction-02__link-item--arrow::after { filter: brightness(0) invert(1); } .l-bg--black .p-panel-introduction-02__media:where([href]):hover .p-panel-introduction-02__title-main, .l-bg--black .p-panel-introduction-02__media:where([href]):active .p-panel-introduction-02__title-main, .l-bg--black .p-panel-introduction-02__media:where([href]):focus-visible .p-panel-introduction-02__title-main { filter: brightness(0) invert(1); } .l-bg--black .p-panel-introduction-03__wrap:where([href]):hover .p-panel-introduction-03__title, .l-bg--black .p-panel-introduction-03__wrap:where([href]):hover .p-panel-introduction-03__text, .l-bg--black .p-panel-introduction-03__wrap:where([href]):active .p-panel-introduction-03__title, .l-bg--black .p-panel-introduction-03__wrap:where([href]):active .p-panel-introduction-03__text, .l-bg--black .p-panel-introduction-03__wrap:where([href]):focus-visible .p-panel-introduction-03__title, .l-bg--black .p-panel-introduction-03__wrap:where([href]):focus-visible .p-panel-introduction-03__text { filter: brightness(0) invert(1); } .l-bg--black .p-panel-introduction-03__media:where([href]):hover .p-panel-introduction-03__title, .l-bg--black .p-panel-introduction-03__media:where([href]):active .p-panel-introduction-03__title, .l-bg--black .p-panel-introduction-03__media:where([href]):focus-visible .p-panel-introduction-03__title { filter: brightness(0) invert(1); } .l-bg--black .p-panel-banner__wrap:where([href]):hover .p-panel-banner__link-item, .l-bg--black .p-panel-banner__wrap:where([href]):active .p-panel-banner__link-item, .l-bg--black .p-panel-banner__wrap:where([href]):focus-visible .p-panel-banner__link-item { filter: brightness(0) invert(1); } .l-bg--black .p-panel-banner-02__wrap:where([href]):hover .p-panel-banner-02__hdg, .l-bg--black .p-panel-banner-02__wrap:where([href]):hover .p-panel-banner-02__text, .l-bg--black .p-panel-banner-02__wrap:where([href]):active .p-panel-banner-02__hdg, .l-bg--black .p-panel-banner-02__wrap:where([href]):active .p-panel-banner-02__text, .l-bg--black .p-panel-banner-02__wrap:where([href]):focus-visible .p-panel-banner-02__hdg, .l-bg--black .p-panel-banner-02__wrap:where([href]):focus-visible .p-panel-banner-02__text { filter: brightness(0) invert(1); } .l-bg--black .p-text-more__btn::before { filter: brightness(0) invert(1); } .l-bg--black .p-carousel__arrow-image[src*=violet-01] { filter: brightness(0) invert(1); } .l-bg--black .p-carousel__control-btn { filter: brightness(0) invert(1); } .l-bg--black .p-carousel__indicator-button::after { filter: brightness(0) invert(1); } .l-bg--black .p-layout-features__content-panel:hover .p-layout-features__content-title, .l-bg--black .p-layout-features__content-panel:active .p-layout-features__content-title, .l-bg--black .p-layout-features__content-panel:focus-visible .p-layout-features__content-title { filter: brightness(0) invert(1); } .l-bg--black .p-layout-features__content-link:hover, .l-bg--black .p-layout-features__content-link:active, .l-bg--black .p-layout-features__content-link:focus-visible { filter: brightness(0) invert(1); } .l-bg--gray { /* color */ --color-bg-default: #f3f3f3; --color-bg-box: #fff; --color-icon: #ccc; --color-line: #949494; background-color: var(--color-bg-default); } .l-bg--gray .c-form__item--bg-gray { background-color: #ccc; } .l-bg--gray .p-box { background-color: var(--color-bg-box); border: 1px solid var(--color-line); } .l-bg--gray .p-box-toggle__item { border: 1px solid var(--color-line); } /* Header * ---------------------------- */ /* .l-header --- */ .l-header { position: relative; top: 0; left: 0; max-height: 100vh; background: #fff; overflow-y: auto; z-index: var(--zindex-header); } @media only screen and (min-width: 1251px) { .l-header { position: relative; overflow-y: visible; } } .l-header.is-sticky { position: sticky; top: 0; left: 0; } .is-product .l-header { position: relative; } /* .l-header-breadcrumb --- */ .l-header-breadcrumb { display: none; } @media only screen and (min-width: 1251px) { .l-header-breadcrumb { display: block; margin: 0.75rem 0 1.5rem; } } /* .l-header-products --- */ .l-header-products { position: relative; max-height: 100vh; margin-bottom: 2rem; background: #fff; z-index: var(--zindex-header-products); } @media only screen and (min-width: 1251px) { .l-header-products { overflow-y: visible; padding-top: 0.375rem; } } .l-header-products.is-sticky { position: sticky; top: 0; left: 0; } /* Navigation * ---------------------------- */ /* .l-nav-fixed-menu --- */ .l-nav-fixed-menu { bottom: 0; left: 0; width: 100%; z-index: var(--zindex-fixed-link); } html[data-script-enabled=true] .l-nav-fixed-menu { position: fixed; visibility: hidden; } @media only screen and (min-width: 769px) { .l-nav-fixed-menu { left: auto; bottom: 5rem; right: 0; width: -moz-fit-content; width: fit-content; pointer-events: none; } } html[data-script-enabled=true] .l-nav-fixed-menu.is-show { visibility: visible; } /* Footer * ---------------------------- */ /* .l-footer-breadcrumb --- */ .l-footer-breadcrumb { padding-bottom: 0.75rem; } /* To pagetop * ---------------------------- */ .l-to-pagetop { display: none; } @media only screen and (min-width: 769px) { .l-to-pagetop { position: sticky; bottom: 0; display: block; max-width: var(--width-max-content); margin: 0 auto; } } /* link-anchor * ---------------------------- */ /* .l-link-anchor --- */ .l-link-anchor { padding-left: 1rem; padding-right: 1rem; } @media only screen and (min-width: 769px) { .l-link-anchor { padding-left: 1.5rem; padding-right: 1.5rem; } } @media only screen and (min-width: 769px) { .l-link-anchor--sticky-header.is-sticky-active { position: sticky; top: var(--js-header-height); z-index: var(--zindex-fixed-link); } } /* mainvisual * ---------------------------- */ /* .l-mainvisual --- */ .l-mainvisual { padding-bottom: 3.75rem; } @media only screen and (min-width: 769px) { .l-mainvisual { padding-bottom: 4rem; } } /* important-notice * ---------------------------- */ /* .l-important-notice --- */ .l-important-notice { padding-bottom: 2rem; } .l-important-notice + .l-mainvisual { margin-top: -2rem; } .l-header-products + .l-main .l-important-notice { margin-top: -2rem; } /* Download List * ---------------------------- */ .l-dl-list { display: none; } @media only screen and (min-width: 769px) { .l-dl-list { position: sticky; bottom: 0; display: block; max-width: var(--width-max-content); margin: 0 auto; } } /** * Object * ======================================= */ /* Object/Component * ---------------------------- */ .p-hero__content-inner > :first-child, .p-hero-contact__content-inner > :first-child, .p-form-search__content > :first-child, .p-form-search__form > :first-child, .p-panel__content > :first-child, .p-panel-introduction__content > :first-child, .p-panel-introduction-02__content > :first-child, .p-panel-introduction-03__content > :first-child, .p-panel-result__anchor > :first-child, .p-panel-news__content > :first-child, .p-panel-news__media > :first-child, .p-panel-news-02__content > :first-child, .p-panel-check__content > :first-child, .p-panel-check__compare > :first-child, .p-box__content > :first-child, .p-box-02__content > :first-child, .p-box-scroll__content > :first-child, .p-box-alert__content > :first-child, .p-media-layout__content > :first-child, .p-media-layout__media > :first-child, .p-media-wave-layout__content > :first-child, .p-media-wave-layout__media > :first-child, .p-layout__content > :first-child, .p-heading-attach__body > :first-child, .p-important-notice__inner > :first-child, .c-tab__panel > :first-child, .c-list__content > :first-child, .c-list-number__content > :first-child { margin-top: 0; } .p-hero__content-inner > :last-child, .p-hero-contact__content-inner > :last-child, .p-form-search__content > :last-child, .p-form-search__form > :last-child, .p-panel__content > :last-child, .p-panel-introduction__content > :last-child, .p-panel-introduction-02__content > :last-child, .p-panel-introduction-03__content > :last-child, .p-panel-result__anchor > :last-child, .p-panel-news__content > :last-child, .p-panel-news__media > :last-child, .p-panel-news-02__content > :last-child, .p-panel-check__content > :last-child, .p-panel-check__compare > :last-child, .p-box__content > :last-child, .p-box-02__content > :last-child, .p-box-scroll__content > :last-child, .p-box-alert__content > :last-child, .p-media-layout__content > :last-child, .p-media-layout__media > :last-child, .p-media-wave-layout__content > :last-child, .p-media-wave-layout__media > :last-child, .p-layout__content > :last-child, .p-heading-attach__body > :last-child, .p-important-notice__inner > :last-child, .c-tab__panel > :last-child, .c-list__content > :last-child, .c-list-number__content > :last-child { margin-bottom: 0; } /* heading * ---------------------------- */ /* .c-heading-1 */ .c-heading-1__heading { font-size: 2.125rem; } @media only screen and (min-width: 769px) { .c-heading-1__heading { font-size: 2.5rem; } } .c-heading-1--center { text-align: center; } /* .c-heading-2 */ .c-heading-2__heading { font-size: 1.875rem; } @media only screen and (min-width: 769px) { .c-heading-2__heading { font-size: 2.25rem; } } .c-heading-2--center { text-align: center; } /* .c-heading-2-type2 */ .c-heading-2-type2__heading { font-size: 1.5rem; } @media only screen and (min-width: 769px) { .c-heading-2-type2__heading { font-size: 1.875rem; } } /* .c-heading-icon */ .c-heading-icon__heading { padding-left: 2rem; position: relative; font-size: 1.875rem; display: inline-block; } @media only screen and (min-width: 769px) { .c-heading-icon__heading { font-size: 2.25rem; } } .c-heading-icon__heading::before { display: block; content: ""; position: absolute; top: 0.75rem; left: 0; } .c-heading-icon--notice .c-heading-icon__heading::before { background-image: url("/assets/common/images/icon/icon-notice.jpg"); background-size: 0.9375rem 1.5rem; background-position: center; background-repeat: no-repeat; width: 1.1875rem; height: 1.875rem; } /* .c-heading-3 */ .c-heading-3__heading { font-size: 1.5rem; } @media only screen and (min-width: 769px) { .c-heading-3__heading { font-size: 1.875rem; } } .c-heading-3__heading-sub { display: block; font-size: 1.25rem; } @media only screen and (min-width: 769px) { .c-heading-3__heading-sub { font-size: 1.625rem; } } .c-heading-3--center { text-align: center; } .c-heading-3--icon-exclamation { position: relative; padding-left: 2rem; } .c-heading-3--icon-exclamation::before { position: absolute; content: ""; display: block; top: 0.625rem; left: 0; width: 20px; height: 20px; background-image: url("/assets/common/images/icon/icon-alert.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; } @media only screen and (min-width: 769px) { .c-heading-3--icon-exclamation::before { top: 50%; transform: translateY(-50%); } } /* .c-heading-4 */ .c-heading-4__heading { font-size: 1.25rem; } @media only screen and (min-width: 769px) { .c-heading-4__heading { font-size: 1.5rem; } } .c-heading-4--center { text-align: center; } /* .c-heading-sub */ .c-heading-sub { margin-top: 0.75rem; } @media only screen and (min-width: 769px) { .c-heading-sub { margin-top: 1.5rem; } } .c-heading-sub__heading { font-size: 1.25rem; } @media only screen and (min-width: 769px) { .c-heading-sub__heading { font-size: 1.5rem; } } /* text * ---------------------------- */ /* .c-text */ .c-text + .c-text { margin-top: 0.5rem; } /* .c-text-lead */ .c-text-lead { font-weight: bold; } .c-text-lead--icon-exclamation { position: relative; padding-left: 2rem; } .c-text-lead--icon-exclamation::before { position: absolute; content: ""; display: block; top: 0.125rem; left: 0; width: 20px; height: 20px; background-image: url("/assets/common/images/icon/icon-alert.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; } @media only screen and (min-width: 769px) { .c-text-lead--icon-exclamation::before { top: 50%; transform: translateY(-50%); } } /* List * ---------------------------- */ /* .c-list */ .c-list__item { margin-top: 0.5rem; padding-left: 1.125rem; position: relative; } .c-list__item::before { position: absolute; content: ""; display: block; background-color: var(--color-main); border-radius: 50%; height: 8px; left: 0; top: 8px; width: 8px; } .c-list__item:first-of-type { margin-top: 0; } .c-list__item > [class*=p-list] { margin-bottom: 0; margin-top: 0.5rem; } .c-list__content { margin-top: 0.5rem; } @media only screen and (min-width: 769px) { .c-list__content { margin-top: 0.75rem; } } /* .c-list-number */ .c-list-number { counter-reset: number; } .c-list-number__item { counter-increment: number; margin-top: 0.5rem; padding-left: 1.75rem; position: relative; } .c-list-number__item::before { content: counter(number); display: block; left: 0; position: absolute; top: 0; } .c-list-number__item:first-of-type { margin-top: 0; } .c-list-number__item > [class*=p-list] { margin-bottom: 0; margin-top: 0.5rem; } .c-list-number__content { margin-top: 0.5rem; } @media only screen and (min-width: 769px) { .c-list-number__content { margin-top: 0.75rem; } } /* .c-list-question */ .c-list-question__text { display: inline-block; } .c-list-question__text:where([href]):hover, .c-list-question__text:where([href]):active, .c-list-question__text:where([href]):focus-visible { color: var(--color-main); text-decoration: underline; } .c-list-question__item { border-bottom: 1px solid #ccc; padding: 1rem 0 1rem 1.75rem; position: relative; } .c-list-question__item::before { position: absolute; content: ""; display: block; content: "Q"; font-family: var(--font-family-hdg); font-size: 1.5rem; left: 0; top: 8px; } /* .c-list-description */ .c-list-description__inner { display: flex; } .c-list-description__title { font-weight: bold; } /* .c-list-breadcurmb */ .c-list-breadcurmb { display: flex; flex-wrap: wrap; } .c-list-breadcurmb__item { font-size: 0.75rem; padding-left: 0.375rem; } .c-list-breadcurmb__item:first-child { padding-left: 0; } .c-list-breadcurmb__item:first-child .c-list-breadcurmb__content::before { display: none; } .c-list-breadcurmb__content { align-items: center; display: flex; } .c-list-breadcurmb__content::before { border-color: transparent transparent transparent #949494; border-style: solid; border-width: 0.25rem 0 0.25rem 0.43125rem; content: ""; display: block; height: 0; padding-right: 0.5rem; width: 0; } @media only screen and (min-width: 769px) { a[href].c-list-breadcurmb__content { text-decoration: underline; } a[href].c-list-breadcurmb__content:hover, a[href].c-list-breadcurmb__content:active, a[href].c-list-breadcurmb__content:focus-visible { text-decoration: none; } } /* .c-dealer-map */ .c-dealer-map { display: grid; grid-template-areas: "map" "paging" "list" "paging2"; grid-template-rows: auto 1fr auto; gap: 2rem; } .c-dealer-map__paging { grid-area: paging; display: flex; gap: 2rem; margin: auto; } .c-dealer-map__paging b { font-weight: bold; } .c-dealer-map__paging-bottom { grid-area: paging2; } .c-dealer-map__paging-count { min-width: 80px; } .c-dealer-map__number { font-size: 1rem; font-weight: normal; color: #fff; width: 1.1875rem; position: absolute; top: 0.125rem; left: 0.1875rem; text-align: center; } [aria-current=location] .c-dealer-map__number { font-weight: bold; } .c-dealer-map__list { grid-area: list; margin: -1.5rem 0; } .c-dealer-map__map { grid-area: map; width: 100%; height: 300px; } .c-dealer-map__list-item { border-bottom: 1px solid #ccc; display: grid; gap: 0.25rem; padding: 1.5rem 0; overflow-wrap: anywhere; } .c-dealer-map__list-item:first-of-type { border-top: 1px solid #ccc; } .c-dealer-map__list-item:last-of-type { border-bottom: 0; } .c-dealer-map__heading { position: relative; font-size: 1.25rem; font-weight: bold; padding-left: 2.3125rem; margin-bottom: 0.5rem; } .c-dealer-map__heading::before { content: ""; position: absolute; left: 0; display: block; background-image: url("/assets/common/images/icon/icon-map-location-violet-01.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; width: 1.5625rem; height: 2.1875rem; } [aria-current=location] .c-dealer-map__heading::before { background-image: url("/assets/common/images/icon/icon-map-location-red-02.svg"); } .c-dealer-map__label { margin-bottom: 0.25rem; } .c-dealer-map__bubble { font-size: 1rem; display: grid; gap: 0.25rem; max-width: 18rem; overflow-wrap: anywhere; margin: 0.25rem; } .c-dealer-map__bubble-name { font-size: 1.125rem; font-weight: bold; margin-bottom: 0.25rem; } @media only screen and (min-width: 769px) { .c-dealer-map { grid-template-areas: "paging space" "list map" "paging2 space2"; grid-template-columns: 4fr 6fr; gap: 0.625rem 0; height: 39.375rem; } .c-dealer-map__list { padding: 0 1.5rem 0; border: 1px solid #ccc; overflow-y: auto; margin: 0; } .c-dealer-map__list-item:first-of-type { border-top: none; } .c-dealer-map__map { height: 100%; } } /* .c-list-category */ .c-list-category { color: var(--color-font-sub); display: flex; flex-wrap: wrap; } .c-list-category > li:not(:first-of-type)::before { content: ","; } /* link * ---------------------------- */ /* .c-link-icon */ .c-link-icon { display: inline-flex; margin-left: 0.75rem; vertical-align: middle; } .c-link-icon-left { display: inline-flex; margin-right: 0.75rem; vertical-align: middle; } .c-link-icon-left--narrow { display: inline-flex; margin-right: 0.5rem; vertical-align: middle; } /* .c-link */ .c-link { color: var(--color-font-default); } @media only screen and (min-width: 769px) { .c-link:hover, .c-link:active, .c-link:focus-visible { text-decoration: underline; color: var(--color-main); } } .c-link--arrow::after { content: url("/assets/common/images/icon/icon-arrow-right-violet-01.svg"); display: inline-block; padding-left: 0.75rem; } .c-link--anchor { position: relative; padding-right: 1.25rem; } .c-link--anchor::after { position: absolute; content: ""; display: block; top: 50%; transform: translateY(-50%) rotate(135deg); right: 0; width: 8px; height: 8px; border-top: 2px solid var(--color-font-default); border-right: 2px solid var(--color-font-default); } /* .c-link-zoom-image */ .c-link-zoom-image { position: relative; display: block; width: -moz-fit-content; width: fit-content; } .c-link-zoom-image > img { vertical-align: top; transition: opacity var(--transition-duration); } @media only screen and (min-width: 769px) { .c-link-zoom-image > img:hover, .c-link-zoom-image > img:active, .c-link-zoom-image > img:focus-visible { opacity: 0.7; } } .c-link-zoom-image__icon { position: absolute; display: flex; justify-content: center; align-items: center; left: 0.5rem; bottom: 0.5rem; width: 1.875rem; height: 1.875rem; border-radius: 0.3125rem; background-color: rgba(255, 255, 255, 0.8); z-index: var(--zindex-layer1); } /* .c-link-list */ .c-link-list__item { margin-top: 0.75rem; } .c-link-list__item:first-of-type { margin-top: 0; } /* note --- */ /* .c-note */ .c-note__item { align-items: baseline; display: flex; } .c-note__item + .c-note__item { margin-top: 0.5rem; } .c-note__mark { flex: 0 0 auto; margin-right: 0.625rem; } .c-note__text { flex: 1 1 auto; } .c-note__mark, .c-note__text { color: var(--color-font-default); font-size: 0.875rem; } /* media * ---------------------------- */ /* .c-media */ .c-media { align-items: center; display: inline-flex; flex-direction: column-reverse; justify-content: center; } .c-media__media { flex: 0 0 auto; max-width: 100%; } .c-media__item { display: block; height: auto; margin: auto; max-width: 100%; } .c-media__caption { margin-top: 0.5rem; } @media only screen and (min-width: 769px) { .c-media__caption { margin-top: 0.75rem; } } .c-media--align-left { align-items: flex-start; } /* .c-media-movie */ .c-media-movie { margin: auto; /* max-width: 57.1875rem; */ } .c-media-movie__item { padding-top: 56.25%; position: relative; width: 100%; } .c-media-movie iframe { border: 0; height: 100% !important; left: 0; position: absolute; top: 0; width: 100% !important; } .c-media-movie--full { max-width: 100%; } /* .c-media-audio */ .c-media-audio__audio { width: 100%; } /* button * ---------------------------- */ /* .c-button */ .c-button { display: flex; flex-wrap: wrap; gap: 1rem 0.75rem; } .c-button--center { justify-content: center; } .c-button--right { justify-content: flex-end; } .c-button--full { display: block; } .c-button--full .c-button__btn { display: block; text-align: center; } .c-button__btn { padding: 0.75rem 1.5rem; border-radius: 25px; } @media only screen and (min-width: 769px) { .c-button__btn { padding: 0.75rem 1.875rem; } } .c-button__btn--primary { background-color: #fff; border: 1px solid var(--color-main); } .c-button__btn--primary:hover, .c-button__btn--primary:active, .c-button__btn--primary:focus-visible { background-color: var(--color-main); } .c-button__btn--primary:hover .c-button__text, .c-button__btn--primary:active .c-button__text, .c-button__btn--primary:focus-visible .c-button__text { color: #fff; } .c-button__btn--icon { position: relative; } .c-button__btn--icon:hover .c-link-icon, .c-button__btn--icon:active .c-link-icon, .c-button__btn--icon:focus-visible .c-link-icon { filter: brightness(0) invert(1); } .c-button__btn--icon .c-button__text { position: relative; } .c-button__btn--icon .c-button__text::after { position: absolute; content: ""; display: block; top: 50%; right: -25px; background-size: cover; background-repeat: no-repeat; transform: translateY(-50%); } .c-button__btn--icon.-more { padding: 0.75rem 3rem 0.75rem 1.5rem; } @media only screen and (min-width: 769px) { .c-button__btn--icon.-more { padding: 0.75rem 3.375rem 0.75rem 1.875rem; } } .c-button__btn--icon.-more .c-button__text::after { width: 13px; height: 7px; background-image: url("/assets/common/images/icon/icon-arrow-down-violet-01.svg"); } .c-button__btn--icon.-more:hover .c-button__text::after, .c-button__btn--icon.-more:active .c-button__text::after, .c-button__btn--icon.-more:focus-visible .c-button__text::after { background-image: url("/assets/common/images/icon/icon-arrow-down-white-01.svg"); } .c-button__btn--secondary { background-color: var(--color-main); border: 1px solid var(--color-white); } .c-button__btn--secondary .c-button__text { color: var(--color-white); } .c-button__btn--secondary:hover, .c-button__btn--secondary:active, .c-button__btn--secondary:focus-visible { background-color: #785898; } .c-button__btn[disabled], .c-button__btn:not(button, [href]) { background-color: var(--color-bg-box); border-color: var(--color-disabled-line); } .c-button__btn[disabled] .c-button__text, .c-button__btn:not(button, [href]) .c-button__text { color: var(--color-disabled-text); } .c-button__btn[disabled] .c-button__text::after, .c-button__btn:not(button, [href]) .c-button__text::after { background-image: url("/assets/common/images/icon/icon-arrow-down-gray-01.svg"); } .c-button__btn[disabled] .c-link-icon, .c-button__btn:not(button, [href]) .c-link-icon { filter: grayscale(1) opacity(0.5); } .c-button__btn[disabled]:hover, .c-button__btn[disabled]:active, .c-button__btn[disabled]:focus-visible, .c-button__btn:not(button, [href]):hover, .c-button__btn:not(button, [href]):active, .c-button__btn:not(button, [href]):focus-visible { background-color: var(--color-bg-box); } .c-button__btn[disabled]:hover .c-button__text, .c-button__btn[disabled]:active .c-button__text, .c-button__btn[disabled]:focus-visible .c-button__text, .c-button__btn:not(button, [href]):hover .c-button__text, .c-button__btn:not(button, [href]):active .c-button__text, .c-button__btn:not(button, [href]):focus-visible .c-button__text { color: var(--color-disabled-text); } .c-button__btn[disabled]:hover .c-button__text::after, .c-button__btn[disabled]:active .c-button__text::after, .c-button__btn[disabled]:focus-visible .c-button__text::after, .c-button__btn:not(button, [href]):hover .c-button__text::after, .c-button__btn:not(button, [href]):active .c-button__text::after, .c-button__btn:not(button, [href]):focus-visible .c-button__text::after { background-image: url("/assets/common/images/icon/icon-arrow-down-gray-01.svg"); } .c-button__btn[disabled]:hover .c-link-icon, .c-button__btn[disabled]:active .c-link-icon, .c-button__btn[disabled]:focus-visible .c-link-icon, .c-button__btn:not(button, [href]):hover .c-link-icon, .c-button__btn:not(button, [href]):active .c-link-icon, .c-button__btn:not(button, [href]):focus-visible .c-link-icon { filter: grayscale(1) opacity(0.5); } .c-button__text { font-size: 1rem; color: var(--color-main); } /* .c-button-sns */ .c-button-sns { background-color: #585858; color: #fff; padding: 0 1rem; } .c-button-sns--dark { background-color: #222; } @media only screen and (min-width: 769px) { .c-button-sns { padding: 0 1.5rem; } } .c-button-sns__inner { display: flex; flex-direction: column; max-width: var(--width-max-content); padding: 2rem 0; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 769px) { .c-button-sns__inner { flex-direction: row; justify-content: center; align-items: center; padding: 0.625rem 0; } } .c-button-sns__text { margin-bottom: 1rem; font-size: 1.125rem; text-align: center; } @media only screen and (min-width: 769px) { .c-button-sns__text { margin-right: 2.5rem; margin-bottom: 0rem; font-size: 1.25rem; } } .c-button-sns__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .c-button-sns__list-link { display: flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 4.5rem; transition: opacity var(--transition-duration); } .c-button-sns__list-link:hover, .c-button-sns__list-link:active, .c-button-sns__list-link:focus-visible { opacity: 0.7; } .c-button-sns__icon--facebook { width: 40px; } .c-button-sns__icon--twitter { width: 40px; } .c-button-sns__icon--instagram { width: 40px; } .c-button-sns__icon--youtube { width: 40px; } .c-button-sns__icon--linkedin { width: 48px; } .c-button-sns__icon--discord { width: 40px; } .c-button-sns__icon--tiktok { width: 34px; } /* .c-button-add-list */ .c-button-add-list { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--color-main); background-color: var(--color-white); border-radius: 50%; transition: background-color var(--transition-duration); } .c-button-add-list:hover, .c-button-add-list:active, .c-button-add-list:focus-visible { background-color: var(--color-main); } .c-button-add-list:hover .c-button-add-list__icon, .c-button-add-list:active .c-button-add-list__icon, .c-button-add-list:focus-visible .c-button-add-list__icon { filter: brightness(0) invert(1); } .c-button-add-list.is-active { background-color: var(--color-main); } .c-button-add-list.is-active .c-button-add-list__icon { filter: brightness(0) invert(1); } .c-button-add-list__icon { transition: filter var(--transition-duration); } /* .c-button-sns-tob */ .c-button-sns-tob { background-color: #222; color: #fff; padding: 0 1rem; } @media only screen and (min-width: 769px) { .c-button-sns-tob { padding: 0 1.5rem; } } .c-button-sns-tob__inner { display: flex; flex-direction: column; max-width: var(--width-max-content); padding: 2rem 0; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 769px) { .c-button-sns-tob__inner { flex-direction: row; justify-content: center; align-items: center; padding: 0.625rem 0; } } .c-button-sns-tob__text { margin-bottom: 1rem; font-size: 1.125rem; text-align: center; } @media only screen and (min-width: 769px) { .c-button-sns-tob__text { margin-right: 2.5rem; margin-bottom: 0rem; font-size: 1.25rem; } } .c-button-sns-tob__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .c-button-sns-tob__list-link { display: flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 4.5rem; transition: opacity var(--transition-duration); } .c-button-sns-tob__list-link:hover, .c-button-sns-tob__list-link:active, .c-button-sns-tob__list-link:focus-visible { opacity: 0.7; } .c-button-sns-tob__icon--facebook { width: 40px; } .c-button-sns-tob__icon--twitter { width: 40px; } .c-button-sns-tob__icon--instagram { width: 40px; } .c-button-sns-tob__icon--youtube { width: 40px; } .c-button-sns-tob__icon--linkedin { width: 48px; } .c-button-sns-tob__icon--discord { width: 40px; } .c-button-sns-tob__icon--tiktok { width: 34px; } /* Table --- */ /* .c-table */ .c-table { width: 100%; } .c-table thead th { vertical-align: middle; background-color: var(--color-bg-table-th); } .c-table thead td { background-color: var(--color-bg-table-td); } .c-table th, .c-table td { padding: 0.75rem; border: 1px solid var(--color-line); } .c-table th { background-color: var(--color-bg-table-th); } .c-table th.c-table__em { font-size: 1.125rem; font-weight: bold; background-color: var(--color-bg-table-th-em); border-bottom: 1px solid var(--color-white); } .c-table th.c-table__em.-last { border-bottom: 1px solid var(--color-line); } .c-table td { background-color: var(--color-bg-table-td); } .c-table .c-table__th { background-color: var(--color-bg-table-th); } .c-table .c-table__td { background-color: var(--color-bg-table-td); } .c-table__icon-delete-wrap { display: flex; align-items: center; } .c-table__icon-delete { display: grid; place-items: center; width: 16px; height: 16px; margin-right: 12px; flex-shrink: 0; } .c-table.-sp-col1 th, .c-table.-sp-col1 td { display: block; width: 100%; } @media only screen and (min-width: 769px) { .c-table.-sp-col1 th, .c-table.-sp-col1 td { display: table-cell; width: auto; } } /* .c-table-scroll */ .c-table-scroll__label { position: relative; padding-left: 3.75rem; margin-bottom: 0.75rem; } .c-table-scroll__label::before { position: absolute; content: ""; display: block; top: 0; left: 0; width: 52px; height: 20px; background-image: url("/assets/common/images/icon/icon-scroll.svg"); background-repeat: no-repeat; background-size: contain; } .c-table-scroll__inner { overflow: auto; } .c-table-scroll__inner .c-table { min-width: 742px; margin-bottom: 0; border-collapse: separate; border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); } .c-table-scroll__inner th, .c-table-scroll__inner td { border: 0; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .c-table-scroll__horizontal-sticky { position: sticky; left: 0; z-index: var(--zindex-layer2); } .c-table-scroll__horizontal-sticky--sub-hook, .c-table-scroll__horizontal-sticky--sub, .c-table-scroll__horizontal-sticky--sub-02 { width: 75px; min-width: 75px !important; } @media only screen and (min-width: 769px) { .c-table-scroll__horizontal-sticky--sub-hook, .c-table-scroll__horizontal-sticky--sub, .c-table-scroll__horizontal-sticky--sub-02 { width: 110px; min-width: 110px !important; } } .c-table-scroll__horizontal-sticky--sub { left: 75px; } @media only screen and (min-width: 769px) { .c-table-scroll__horizontal-sticky--sub { left: 110px; } } .c-table-scroll__horizontal-sticky--sub-02 { left: 150px; } @media only screen and (min-width: 769px) { .c-table-scroll__horizontal-sticky--sub-02 { left: 220px; } } @media only screen and (min-width: 769px) { .c-table-scroll__label { display: none; } } /* box * ---------------------------- */ /* .c-box-heading */ .c-box-heading { font-size: 1.25rem; } @media only screen and (min-width: 769px) { .c-box-heading { font-size: 1.5rem; } } /* panel * ---------------------------- */ /* .c-panel */ .c-panel__wrap { display: flex; flex-direction: column-reverse; justify-content: flex-end; position: relative; } .c-panel__wrap:any-link:hover .c-panel__media-item, .c-panel__wrap:any-link:active .c-panel__media-item, .c-panel__wrap:any-link:focus-visible .c-panel__media-item { opacity: var(--opacity-images); } .c-panel__media { flex: 1 1 100%; max-width: 100%; } .c-panel__media-item { display: block; height: auto; margin: auto; width: 100%; } .c-panel__content { background-color: rgba(38, 25, 58, 0.9); bottom: 0; color: var(--color-white); flex: 1 1 100%; left: 0; padding: 0.125rem 0.75rem; position: absolute; z-index: var(--zindex-layer1); text-align: center; width: 100%; } @media only screen and (min-width: 769px) { .c-panel__content { padding: 0.75rem; } } .c-panel__heading { font-size: 1rem; } @media only screen and (min-width: 769px) { .c-panel__heading { font-size: 1.125rem; } } /* form * ---------------------------- */ .c-form__item { margin-bottom: 1.5rem; } .c-form__item:last-child { margin-bottom: 0; } .c-form__item.is-error .c-form__text-error { display: block; margin-top: 0.5rem; font-weight: bold; color: #a1211e; } .c-form__item.is-error .c-form__input, .c-form__item.is-error .c-form__select, .c-form__item.is-error .c-form__textarea { border: 2px solid #a1211e; background-color: #eed9d9; } .c-form__item.is-error .c-form-checkbox__text::before { border: 2px solid #a1211e; background-color: #eed9d9; } .c-form__item.is-error .c-form-checkbox__item:checked + .c-form-checkbox__text::before { border: 1px solid var(--color-main); } .c-form__item--bg-gray { background-color: #eee; padding: 1.5rem; } .c-form__item--bg-gray:last-child { margin-bottom: 0; } @media only screen and (min-width: 769px) { .c-form__item--half { width: calc(50% - 16px); } } .c-form__label { display: inline-block; vertical-align: middle; } .c-form__label-text { margin-right: 0.5rem; } .c-form__label-required { display: inline-block; padding: 0.125rem 0.25rem; background-color: var(--color-icon-new); color: var(--color-white); font-size: 0.75rem; line-height: 1.2; vertical-align: middle; } @media only screen and (min-width: 769px) { .c-form__label-required { padding: 0.25rem 0.5rem; font-size: 0.875rem; } } .c-form__legend { display: contents; margin-bottom: 0.5rem; } .c-form .c-form-checkbox { margin-top: 0.5rem; } .c-form__input { width: 100%; border: 1px solid var(--color-line-input-box); margin-top: 0.5rem; padding: 0.5rem 1rem; line-height: 1.4; background-color: var(--color-white); } .c-form__select-wrap { position: relative; margin-top: 0.5rem; } .c-form__select-img { display: block; height: 0.375rem; pointer-events: none; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 0.6875rem; z-index: 10; } .c-form__select { width: 100%; border: 1px solid var(--color-line-input-box); padding: 0.5rem 1rem; line-height: 1.4; background-color: var(--color-white); } .c-form__textarea { width: 100%; min-height: 100px; margin-top: 0.5rem; padding: 0.5rem 1rem; line-height: 1.4; border: 1px solid var(--color-line-input-box); background-color: var(--color-white); } .c-form__text-error { display: none; } .c-form__layout { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 769px) { .c-form__layout { gap: 2rem; grid-template-columns: 1fr 1fr; } } .c-form__layout .c-form__col { flex-basis: 50%; } .c-form__radio-list { display: flex; gap: 2.5rem; margin-top: 0.5rem; } .c-form__radio-label { position: relative; line-height: 1; } .c-form__radio { position: absolute; } .c-form__radio:checked + .c-form__radio-text::after { background-color: var(--color-main); border: 1px solid var(--color-main); height: 0.625rem; width: 0.625rem; left: 0.3125rem; top: 0.8125rem; transform: translateY(-50%); } .c-form__radio:focus-visible + .c-form__radio-text { outline: -webkit-focus-ring-color inset 0.125rem; outline-offset: -0.125rem; } .c-form__radio-text { display: inline-block; padding: 0.125rem 0.125rem 0.125rem 1.625rem; position: relative; line-height: 1.5em; } .c-form__radio-text::before, .c-form__radio-text::after { content: ""; display: block; position: absolute; border-radius: 50%; } .c-form__radio-text::before { background-color: var(--color-white); border: 1px solid var(--color-main); height: 1rem; left: 0.125rem; top: 0.8125rem; transform: translateY(-50%); width: 1rem; } .c-form__text-sub { display: block; margin-top: 0.5rem; } .c-form .c-button { margin-top: 2rem; } @media only screen and (min-width: 769px) { .c-form .c-button { margin-top: 3rem; } } /* .c-form-label */ @media only screen and (max-width: 768px) { .c-form-label--narrow-hide { color: transparent; height: 0; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 0; width: 0; } } @media only screen and (max-width: 768px) { .c-form-label--narrow-hide { color: transparent; height: 0; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 0; width: 0; } } @media only screen and (min-width: 769px) { .c-form-label--wide-hide { color: transparent; height: 0; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 0; width: 0; } } /* .c-form-checkbox */ .c-form-checkbox__label { display: inline-block; line-height: 1; position: relative; } .c-form-checkbox__item { position: absolute; } .c-form-checkbox__item + .c-form-checkbox__text { display: inline-block; padding: 0.125rem 0.125rem 0.125rem 1.625rem; position: relative; line-height: 1.5em; } .c-form-checkbox__item + .c-form-checkbox__text::before, .c-form-checkbox__item + .c-form-checkbox__text::after { content: ""; display: block; position: absolute; } .c-form-checkbox__item + .c-form-checkbox__text::before { background-color: var(--color-white); border: 1px solid var(--color-main); height: 1rem; left: 0.125rem; top: 13px; transform: translateY(-50%); width: 1rem; } .c-form-checkbox__item:checked + .c-form-checkbox__text::before { background-color: var(--color-main); } .c-form-checkbox__item:checked + .c-form-checkbox__text::after { background-image: url("/assets/common/images/icon/icon-check-white-01.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.5rem 0.5rem; height: 0.5rem; left: 0.375rem; top: 13px; transform: translateY(-50%); width: 0.5rem; } .c-form-checkbox__item:focus-visible + .c-form-checkbox__text { outline: -webkit-focus-ring-color inset 0.125rem; outline-offset: -0.125rem; } /* .c-form-radio */ .c-form-radio__label { display: inline-block; line-height: 1; position: relative; } .c-form-radio__item { position: absolute; } .c-form-radio__item + .c-form-radio__text { display: inline-block; padding: 0.125rem 0.125rem 0.125rem 1.625rem; position: relative; line-height: 1.5em; } .c-form-radio__item + .c-form-radio__text::before, .c-form-radio__item + .c-form-radio__text::after { content: ""; display: block; position: absolute; border-radius: 50%; } .c-form-radio__item + .c-form-radio__text::before { background-color: var(--color-white); border: 1px solid var(--color-main); height: 1rem; left: 0.125rem; top: 13px; transform: translateY(-50%); width: 1rem; } .c-form-radio__item:checked + .c-form-radio__text::after { background-color: var(--color-main); border: 1px solid var(--color-main); height: 0.625rem; width: 0.625rem; left: 0.3125rem; top: 13px; transform: translateY(-50%); } .c-form-radio__item:focus-visible + .c-form-radio__text { outline: -webkit-focus-ring-color inset 0.125rem; outline-offset: -0.125rem; } /* .c-form-select */ .c-form-select { position: relative; } .c-form-select__image { display: block; height: 0.375rem; pointer-events: none; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 0.6875rem; z-index: 10; } .c-form-select__item { background-color: var(--color-white); border: 1px solid #ccc; display: block; padding: 0.5rem 1.125rem 0.5rem 1rem; width: 100%; } .c-form-select__item:disabled { background-color: #e1e1e1; } /* .c-form-search */ .c-form-search { margin-bottom: 1rem; position: relative; } .c-form-search::after { background-color: #ccc; content: ""; display: block; height: 1.5rem; position: absolute; right: 3.0625rem; top: 50%; transform: translateY(-50%); width: 1px; } .c-form-search__item { background-color: var(--color-white); border: 1px solid var(--color-line); padding: 0.5rem 3.125rem 0.5rem 1rem; width: 100%; } .c-form-search__button { display: block; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); } .c-form-search__button-image { display: block; height: auto; margin: auto; max-width: 100%; pointer-events: none; } /* .c-form-text */ .c-form-text { display: block; } @media only screen and (min-width: 769px) { .c-form-text__link:hover, .c-form-text__link:active, .c-form-text__link:focus-visible { text-decoration: underline; color: var(--color-main); } } /* Hero * ---------------------------- */ /* .c-hero-feature */ .c-hero-feature { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; min-height: 300px; } @media only screen and (min-width: 769px) { .c-hero-feature { padding: 20px 40px; } } .c-hero-feature__title { font-size: 1.875rem; text-align: center; color: #fff; } @media only screen and (min-width: 769px) { .c-hero-feature__title { font-size: 2.5rem; } } .c-hero-feature__btn { display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 100px; padding: 10px 28px; background-color: rgba(0, 0, 0, 0.4); } .c-hero-feature__list { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 32px; gap: 10px 20px; } .c-hero-feature__texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--zindex-behind); } .c-hero-feature__texture--overlay-gray::before { position: absolute; content: ""; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .c-hero-feature__image { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* .c-hero-feature-02 */ .c-hero-feature-02 { position: relative; min-height: 470px; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem; } @media only screen and (min-width: 769px) { .c-hero-feature-02 { padding-left: 1.5rem; padding-right: 1.5rem; } } .c-hero-feature-02__inner { display: flex; flex-direction: column; } @media only screen and (min-width: 769px) { .c-hero-feature-02__inner { max-width: 1200px; width: 100%; align-items: flex-start; justify-content: center; padding-top: 2.5rem; padding-bottom: 2.5rem; } } .c-hero-feature-02__content { background-color: #191d1f; padding: 2rem 1rem; order: 2; } @media only screen and (min-width: 769px) { .c-hero-feature-02__content { padding: 2.5rem 1.5rem; max-width: 584px; } } .c-hero-feature-02__title { font-size: 1.5rem; color: #fff; margin-bottom: 1rem; } @media only screen and (min-width: 769px) { .c-hero-feature-02__title { font-size: 1.875rem; margin-bottom: 1.5rem; } } .c-hero-feature-02__text { font-size: 1rem; color: #fff; } .c-hero-feature-02__image { width: 100%; height: 100%; } @media only screen and (min-width: 769px) { .c-hero-feature-02__image { position: absolute; top: 0; left: 0; z-index: var(--zindex-behind); } } .c-hero-feature-02__image-item { width: 100%; height: 100%; object-fit: cover; object-position: center; vertical-align: middle; } /* .c-hero-feature-03 */ .c-hero-feature-03 { position: relative; min-height: 11.25rem; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem; } @media only screen and (min-width: 769px) { .c-hero-feature-03 { min-height: 25rem; padding-left: 2.625rem; padding-right: 2.625rem; } } .c-hero-feature-03__inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 1.5rem; padding-bottom: 1.5rem; } @media only screen and (min-width: 769px) { .c-hero-feature-03__inner { max-width: 1200px; width: 100%; padding-top: 2.5rem; padding-bottom: 2.5rem; } } .c-hero-feature-03__lead { font-size: 1.875rem; } @media only screen and (min-width: 769px) { .c-hero-feature-03__lead { font-size: 2.5rem; } } .c-hero-feature-03__image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: var(--zindex-behind); } .c-hero-feature-03__image-item { width: 100%; height: 100%; object-fit: cover; object-position: center; vertical-align: middle; } .l-bg--black .c-hero-feature-03__content { z-index: 1; } .l-bg--black .c-hero-feature-03__image { z-index: 0; } /* Tab * ---------------------------- */ /* .c-tab */ html[data-script-enabled=true] .c-tab__panel:where(:not(:first-of-type)) { display: none; } .c-tab__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-main); font-family: var(--font-family-hdg); border-bottom: 3px solid transparent; padding: 0 0.3125rem 0.5rem; } @media only screen and (min-width: 769px) { .c-tab__tab { font-size: 1.25rem; padding: 0 0.625rem 0.75rem; } } .c-tab__tab.is-current { border-bottom-color: var(--color-main); } .c-tab__item { position: relative; width: 50%; margin-top: 1rem; } @media only screen and (min-width: 769px) { .c-tab__item { width: auto; flex-grow: 1; margin-top: 0; } } .c-tab__item::before { position: absolute; content: ""; display: block; top: 0; width: 1px; height: 30px; background-color: #ccc; } @media only screen and (min-width: 769px) { .c-tab__item::before { right: 100%; } } @media only screen and (max-width: 768px) { .c-tab__item::before { left: 100%; } } @media only screen and (min-width: 769px) { .c-tab__item:first-of-type::before { display: none; } } @media only screen and (max-width: 768px) { .c-tab__item:nth-child(2n)::before { display: none; } } .c-tab__list { display: flex; flex-wrap: wrap; margin-top: -1rem; margin-bottom: 2rem; } @media only screen and (min-width: 769px) { .c-tab__list { flex-wrap: nowrap; margin-top: 0; } } /* other * ---------------------------- */ /* .c-hr */ .c-hr { background-color: var(--color-main); display: block; height: 0.25rem; margin: auto; width: 9.375rem; } /* .c-label */ .c-label { align-items: center; background-color: var(--color-icon); color: var(--color-font-default); display: inline-flex; font-size: 0.75rem; justify-content: center; padding: 0.125rem 0.25rem; text-align: center; } .c-label--new { background-color: var(--color-icon-new); color: var(--color-white); } .c-label--discontinued { background-color: var(--color-icon-discontinued); color: var(--color-white); } @media only screen and (min-width: 769px) { .c-label { font-size: 0.875rem; padding-left: 0.5rem; padding-right: 0.5rem; } } /* Object/Project * ---------------------------- */ /* Breadcurmb --- */ /* .p-breadcurmb */ .p-breadcurmb { padding: 0 1rem; } @media only screen and (min-width: 769px) { .p-breadcurmb { padding: 0 1.5rem; } } .p-breadcurmb__inner { max-width: var(--width-max-content); margin: 0 auto; } /* Header --- */ /* .p-header */ .p-header { border-bottom: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-header { padding: 0 1.5rem; } } .p-header__inner { display: grid; grid-template-columns: 40px 20px 1fr 40px; grid-template-rows: auto 1fr auto; grid-template-areas: "site-type site-type site-type site-type" "menu search logo sign" "header-items header-items header-items header-items"; gap: 0 1.25rem; align-items: center; } @media only screen and (min-width: 1251px) { .p-header__inner { display: grid; grid-template-columns: 118px 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "logo header-items" "logo header-items"; gap: 0 4.6875rem; max-width: var(--width-max-content); padding: 1.25rem 0 0; margin: 0 auto; } } .p-header__logo { grid-area: logo; text-align: center; padding: 0.8125rem 2.5rem 0.6875rem 0; } @media only screen and (min-width: 1251px) { .p-header__logo { padding: 0; } } .p-header__logo a { display: inline-block; line-height: 1; } .p-header__logo img { width: 5.625rem; vertical-align: middle; } @media only screen and (min-width: 1251px) { .p-header__logo img { width: auto; vertical-align: baseline; } } @media only screen and (min-width: 1251px) { [data-script-enabled=true] .l-header.is-sticky .p-header { /* テキスト位置合わせ用調整 */ } [data-script-enabled=true] .l-header.is-sticky .p-header__inner { display: grid; grid-template-rows: auto; grid-template-areas: "logo header-items"; padding: 0.75rem 0 0; } [data-script-enabled=true] .l-header.is-sticky .p-header .p-nav-global__list { padding-bottom: 0.75rem; margin-bottom: -0.75rem; } [data-script-enabled=true] .l-header.is-sticky .p-header .p-header-category { margin-top: -0.0625rem; } } /* .p-header-site-type */ .p-header-site-type { grid-area: site-type; background-color: #eee; } @media only screen and (min-width: 1251px) { .p-header-site-type { display: none; } } .p-header-site-type__inner { padding: 0 1rem; text-align: right; } .p-header-site-type__text { font-weight: bold; font-size: 0.75rem; } /* .p-header-btn-menu */ .p-header-btn-menu { grid-area: menu; width: 1.25rem; height: 0.9375rem; margin-left: 1rem; } @media only screen and (min-width: 1251px) { .p-header-btn-menu { display: none; } } .p-header-btn-menu__btn { position: relative; display: block; width: 100%; height: 100%; } .p-header-btn-menu__btn::before, .p-header-btn-menu__btn::after { position: absolute; content: ""; display: block; width: 100%; height: 0.1875rem; background-color: var(--color-main); transition-property: top, left, bottom, transform, box-shadow, border-radius; transition-duration: var(--transition-duration), var(--transition-duration), var(--transition-duration), var(--transition-duration), var(--transition-duration), var(--transition-duration); } .p-header-btn-menu__btn::before { top: 0; left: 0; box-shadow: 0 0.375rem 0 var(--color-main); } .p-header-btn-menu__btn::after { bottom: 0; left: 0; } .p-header-btn-menu__btn[aria-expanded=true]::before { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); box-shadow: none; border-radius: 1rem; } .p-header-btn-menu__btn[aria-expanded=true]::after { bottom: 50%; left: 50%; transform: translate(-50%, 50%) rotate(-45deg); border-radius: 1rem; } .p-header-btn-menu__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-header-btn-menu__text::before { position: absolute; content: ""; display: block; width: 100%; height: 0.1875rem; background-color: var(--color-main); top: 50%; } /* .p-header-search */ .p-header-search { grid-area: search; } @media only screen and (min-width: 1251px) { .p-header-search { display: none; } } .p-header-search__icon { vertical-align: middle; transition: opacity var(--transition-duration); } .p-header-search__btn { position: relative; } .p-header-search__btn::before, .p-header-search__btn::after { position: absolute; content: ""; display: block; width: 100%; height: 0.1875rem; background-color: var(--color-main); opacity: 0; border-radius: 1rem; transition-property: top, left, transform, opacity; transition-duration: var(--transition-duration), var(--transition-duration), var(--transition-duration), var(--transition-duration); } .p-header-search__btn::before { top: 0; left: 0; } .p-header-search__btn::after { bottom: 0; left: 0; } .p-header-search__btn[aria-expanded=true]::before, .p-header-search__btn[aria-expanded=true]::after { opacity: 1; } .p-header-search__btn[aria-expanded=true]::before { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); } .p-header-search__btn[aria-expanded=true]::after { bottom: 50%; left: 50%; transform: translate(-50%, 50%) rotate(-45deg); } .p-header-search__btn[aria-expanded=true] .p-header-search__icon { opacity: 0; } .p-header-search--pc { grid-area: search-pc; display: none; } @media only screen and (min-width: 1251px) { .p-header-search--pc { align-self: center; display: block; } } /* .p-header-sign */ .p-header-sign { grid-area: sign; margin-right: 1rem; } @media only screen and (min-width: 1251px) { .p-header-sign { display: none; } } .p-header-sign__icon { vertical-align: middle; } .p-header-sign--pc { grid-area: sign-pc; display: none; } @media only screen and (min-width: 1251px) { .p-header-sign--pc { align-self: center; display: block; margin-right: 1.625rem; } } /* .p-header-items */ .p-header-items { grid-area: header-items; } @media only screen and (min-width: 1251px) { .p-header-items { display: grid; grid-template-columns: 1fr max-content max-content max-content max-content max-content; grid-template-rows: auto 1fr; grid-template-areas: "category utility utility language language language" "g-nav g-nav g-nav g-nav sign-pc search-pc"; } } @media only screen and (max-width: 1250px) { [data-script-enabled=true] .p-header-items { display: none; } } [data-script-enabled=true] .p-header-items.is-open { display: block; overflow: hidden; } [data-script-enabled=true] .p-header-items.is-open .p-nav-global { display: block; } [data-script-enabled=true] .p-header-items.is-open .p-header-utility-nav { display: block; } [data-script-enabled=true] .p-header-items.is-open .p-header-language { display: block; } @media only screen and (min-width: 1251px) { [data-script-enabled=true] .l-header.is-sticky .p-header-items { grid-template-columns: max-content 1fr max-content max-content; grid-template-rows: auto; grid-template-areas: "category g-nav sign-pc search-pc"; } [data-script-enabled=true] .l-header.is-sticky .p-header-items .p-header-category__type { display: none; } [data-script-enabled=true] .l-header.is-sticky .p-header-items .p-header-category__nav-title { margin-right: 2.5rem; } [data-script-enabled=true] .l-header.is-sticky .p-header-items .p-header-category__nav-btn { display: none; } [data-script-enabled=true] .l-header.is-sticky .p-header-items .p-nav-global__link { padding: 0; } [data-script-enabled=true] .l-header.is-sticky .p-header-items .p-header-utility-nav { display: none; } [data-script-enabled=true] .l-header.is-sticky .p-header-items .p-header-language { display: none; } } /* .p-header-category */ .p-header-category { grid-area: category; border-bottom: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-header-category { display: flex; align-items: center; border-bottom: 0; } .p-header-category ~ .p-header-language, .p-header-category ~ .p-header-utility-nav { padding-bottom: 0.75rem; } } .p-header-category__type { display: none; } @media only screen and (min-width: 1251px) { .p-header-category__type { position: relative; display: block; padding-right: 1rem; margin-right: 1rem; font-weight: bold; font-size: 1.125rem; } .p-header-category__type::after { position: absolute; content: ""; display: block; width: 0.125rem; height: 1rem; background-color: var(--color-main); top: 50%; right: 0; transform: translateY(-50%); } } .p-header-category__nav { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; grid-template-areas: "category-nav-btn category-nav-title" "category-nav-list category-nav-list"; gap: 0 0.625rem; align-items: center; padding: 0 1rem; border-top: 1px solid var(--color-line); } @media only screen and (max-width: 1250px) { .p-header-category__nav:has(.p-header-category__nav-title:only-child) { display: none; } } @media only screen and (min-width: 1251px) { .p-header-category__nav { display: flex; align-items: center; gap: 0; padding: 0; border-top: 0; } } .p-header-category__nav-title { grid-area: category-nav-title; font-weight: bold; color: var(--color-main); } @media only screen and (min-width: 1251px) { .p-header-category__nav-title { margin-right: 0.625rem; } } .p-header-category__nav-title-text { display: block; } @media only screen and (min-width: 1251px) { .p-header-category__nav-title-text:hover, .p-header-category__nav-title-text:active, .p-header-category__nav-title-text:focus-visible { text-decoration: underline; } } .p-header-category__nav-btn { grid-area: category-nav-btn; position: relative; padding: 1rem 0; } @media only screen and (min-width: 1251px) { .p-header-category__nav-btn { padding: 0; } } .p-header-category__nav-btn-image { display: block; height: 13px; transform: rotate(180deg); transform-origin: center; transition: transform var(--transition-duration); } @media only screen and (min-width: 1251px) { .p-header-category__nav-btn-image { transform: rotate(90deg); } } .p-header-category__nav-btn[aria-expanded=true] .p-header-category__nav-btn-image { transform: rotate(0deg); } @media only screen and (min-width: 1251px) { .p-header-category__nav-btn[aria-expanded=true] .p-header-category__nav-btn-image { transform: rotate(-90deg); } } .p-header-category__nav-list { border-top: 1px solid var(--color-line); background-color: #fff; z-index: var(--zindex-layer1); transition: left var(--transition-duration); } @media only screen and (max-width: 1250px) { .p-header-category__nav-list { position: relative; left: -100vw; height: 0; visibility: hidden; } } @media only screen and (min-width: 1251px) { .p-header-category__nav-list { padding: 1rem 3rem; border: 1px solid var(--color-main); column-count: 3; } .p-header-category__nav-list::before, .p-header-category__nav-list::after { position: absolute; content: ""; display: block; width: 0; height: 0; left: 5.75rem; border-style: solid; border-width: 0 0.3125rem 0.5625rem; border-color: transparent transparent var(--color-main); } .p-header-category__nav-list::before { top: -0.5rem; border-color: transparent transparent var(--color-main); } .p-header-category__nav-list::after { top: -0.375rem; border-color: transparent transparent #fff; } } .p-header-category__nav-list-container { position: relative; grid-area: category-nav-list; } .p-header-category__nav-item { border-bottom: 1px solid var(--color-line); } .p-header-category__nav-item:last-child { border-bottom: 0; } @media only screen and (min-width: 1251px) { .p-header-category__nav-item { border-bottom: 0; } } .p-header-category__nav-link { display: block; padding: 0.75rem 0; color: var(--color-main); } @media only screen and (min-width: 1251px) { .p-header-category__nav-link { padding: 0.5rem 0; } .p-header-category__nav-link:hover, .p-header-category__nav-link:active, .p-header-category__nav-link:focus-visible { text-decoration: underline; } } @media only screen and (max-width: 1250px) { [data-script-enabled=true] .p-header-category ~ .p-nav-global, [data-script-enabled=true] .p-header-category ~ .p-header-utility-nav, [data-script-enabled=true] .p-header-category ~ .p-header-language { position: relative; right: 0; transition: right var(--transition-duration); } [data-script-enabled=true] .p-header-category__nav-btn-image { transition: margin-left var(--transition-duration); } [data-script-enabled=true] .p-header-category__nav-title { opacity: 1; transition: opacity var(--transition-duration); } [data-script-enabled=true] .p-header-category.is-open .p-header-category__nav { grid-template-columns: 1fr; gap: 0; } [data-script-enabled=true] .p-header-category.is-open .p-header-category__nav-list { left: 0; height: auto; visibility: visible; } [data-script-enabled=true] .p-header-category.is-open .p-header-category__nav-title { width: 0; opacity: 0; visibility: hidden; } [data-script-enabled=true] .p-header-category.is-open .p-header-category__nav-btn { display: flex; } [data-script-enabled=true] .p-header-category.is-open .p-header-category__nav-btn-image { transform: rotate(0deg); margin-left: calc(100% - 0.5rem); } [data-script-enabled=true] .p-header-category.is-open ~ .p-nav-global, [data-script-enabled=true] .p-header-category.is-open ~ .p-header-utility-nav, [data-script-enabled=true] .p-header-category.is-open ~ .p-header-language { right: -100vw; height: 0; visibility: hidden; } } @media only screen and (min-width: 1251px) { [data-script-enabled=true] .p-header-category .p-header-category__nav-list-container { display: none; position: absolute; top: calc(100% + 0.75rem); left: -70px; width: 62.8571vw; max-width: 55rem; } [data-script-enabled=true] .p-header-category .p-header-category__nav-list-container::before { position: absolute; content: ""; display: block; display: none; top: -0.75rem; left: 0; width: 62.8571vw; height: 0.75rem; max-width: 55rem; background-color: transparent; } [data-script-enabled=true] .p-header-category.is-open .p-header-category__nav-list-container { display: block; } [data-script-enabled=true] .p-header-category.is-open .p-header-category__nav-list-container::before { display: block; } } .p-header-category__close { display: none; } @media only screen and (min-width: 1251px) { .p-header-category__close { display: block; } } .p-header-category__close-btn { position: absolute; top: 1rem; right: 1rem; display: block; width: 1.3125rem; height: 1.3125rem; z-index: var(--zindex-layer1); } .p-header-category__close-btn::before, .p-header-category__close-btn::after { position: absolute; content: ""; display: block; top: 50%; left: 0; width: 1.3125rem; height: 0.1875rem; margin-top: -0.1875rem; background-color: var(--color-main); border-radius: 1em; } .p-header-category__close-btn::before { transform: rotate(45deg); } .p-header-category__close-btn::after { transform: rotate(-45deg); } .p-header-category__close-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* .p-nav-global */ .p-nav-global { grid-area: g-nav; } .p-nav-global:first-child { border-top: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-nav-global:first-child { border-top: 0; } } @media only screen and (min-width: 1251px) { .p-nav-global__list { display: flex; flex-wrap: wrap; } } .p-nav-global__item { border-bottom: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-nav-global__item { margin-right: 2.5rem; border-bottom: 0; } .p-nav-global__item:last-child { margin-right: 0; } } @media only screen and (min-width: 1251px) { .p-nav-global__item--product-top { display: none; } } .p-nav-global__link { display: block; padding: 0.75rem 1rem; color: var(--color-main); } @media only screen and (min-width: 1251px) { .p-nav-global__link { padding: 0.5rem 0 0.875rem; border-bottom: 0.125rem solid transparent; } .p-nav-global__link:hover, .p-nav-global__link:active, .p-nav-global__link:focus-visible { border-bottom-color: var(--color-main); } } .p-nav-global__link[aria-expanded] { display: grid; grid-template-columns: 1fr 20fr 1.25rem; grid-template-areas: '. img g-nav-icon'; gap: 0; align-items: center; } @media only screen and (min-width: 1251px) { .p-nav-global__link[aria-expanded] { grid-template-columns: 1fr; grid-template-areas: "."; gap: 0; } } .p-nav-global__link[aria-expanded]::after { grid-area: g-nav-icon; display: block; justify-self: right; transition: transform var(--transition-duration); content: url("/assets/common/images/icon/icon-arrow-right-violet-01.svg"); transform: rotate(-90deg); transform-origin: left; } @media only screen and (min-width: 1251px) { .p-nav-global__link[aria-expanded]::after { display: none; } } .p-nav-global__link[aria-expanded=false]::after { transform: rotate(90deg); } .p-nav-global__dropdown { padding: 0 1rem; background-color: #fff; overflow: hidden; transition: height var(--transition-duration); } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown { padding: 1rem 1.5rem; background-color: var(--color-bg-box); border-bottom: 1px solid var(--color-line); } } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-list { max-width: var(--width-max-content); margin: 0 auto; column-count: 4; } .p-nav-global__dropdown-sub-title.p-nav-global__dropdown-list--insert-line, .p-nav-global__dropdown-list:not(.p-nav-global__dropdown-list--top) + .p-nav-global__dropdown-list { padding-top: 0.5rem; margin-top: 0.5rem; border-top: 1px solid #fff; } .p-nav-global__dropdown-list--not-insert-line { padding-top: revert !important; margin-top: revert !important; border-top: none !important; } } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-list--top { display: none; } } .p-nav-global__dropdown-title { padding: 0.75rem 0; font-weight: bold; border-top: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-title { max-width: var(--width-max-content); margin: 0 auto; padding: 0; font-family: var(--font-family-hdg); font-size: 1.5rem; font-weight: normal; border-top: 0; } } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-list:not(.p-nav-global__dropdown-list--top) + .p-nav-global__dropdown-title { margin-top: 3rem; } } .p-nav-global__dropdown-title + .p-nav-global__dropdown-list { padding-left: 1rem; border-top: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-title + .p-nav-global__dropdown-list { margin-top: 1.5rem; padding-left: 0; border-top: 0; } } .p-nav-global__dropdown-title + .p-nav-global__dropdown-list > li:first-child { border-top: 0; } .p-nav-global__dropdown-sub-title { padding: 0.75rem 0 0.75rem 1rem; font-weight: bold; border-top: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-sub-title { max-width: var(--width-max-content); margin: 0 auto; padding: 0; font-size: 1.125rem; border-top: 0; } } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-title + .p-nav-global__dropdown-sub-title { margin-top: 1.5rem; } } .p-nav-global__dropdown-list + .p-nav-global__dropdown-sub-title { padding-left: 0; margin-left: 1rem; } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-list + .p-nav-global__dropdown-sub-title { margin-top: 1.5rem; margin-left: auto; } } .p-nav-global__dropdown-sub-title + .p-nav-global__dropdown-list { padding-left: 1rem; } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-sub-title + .p-nav-global__dropdown-list { margin-top: 0.5rem; padding-left: 0rem; } } .p-nav-global__dropdown-item { border-top: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-item { border-top: 0; } } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-item--top { display: none; } } .p-nav-global__dropdown-link { display: block; padding: 0.75rem 0; color: var(--color-main); } @media only screen and (min-width: 1251px) { .p-nav-global__dropdown-link { display: inline-block; padding: 0.5rem 0; } } [data-script-enabled=true] .p-nav-global__dropdown { display: none; } [data-script-enabled=true] .p-nav-global__dropdown.is-open { display: block; } @media only screen and (min-width: 1251px) { [data-script-enabled=true] .p-nav-global__dropdown.is-open { position: absolute; left: 0; top: 100%; width: 100%; } } [data-script-enabled=true] .p-nav-global { display: none; } @media only screen and (min-width: 1251px) { [data-script-enabled=true] .p-nav-global { display: block; } } /* .p-header-utility-nav */ .p-header-utility-nav { grid-area: utility; } @media only screen and (min-width: 1251px) { .p-header-utility-nav { position: relative; display: flex; align-items: center; padding-right: 1.5rem; } .p-header-utility-nav::after { position: absolute; content: ""; display: block; top: 0.1em; right: 0; width: 1px; height: 1rem; background-color: var(--color-line); } } .p-header-utility-nav__inner { padding: 0 1rem; border-bottom: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-header-utility-nav__inner { padding: 0; border-bottom: 0; } } .p-header-utility-nav__list { padding: 0.5rem 0; } @media only screen and (min-width: 1251px) { .p-header-utility-nav__list { display: flex; justify-content: flex-end; padding: 0; } } .p-header-utility-nav__item { font-size: 0.875rem; } @media only screen and (min-width: 1251px) { .p-header-utility-nav__item { font-size: 0.75rem; margin-left: 1.5rem; } .p-header-utility-nav__item:first-child { margin-left: 0; } } .p-header-utility-nav__link { display: flex; align-items: center; padding: 0.5rem 0; } @media only screen and (min-width: 1251px) { .p-header-utility-nav__link { padding: 0; } .p-header-utility-nav__link:hover, .p-header-utility-nav__link:active, .p-header-utility-nav__link:focus-visible { text-decoration: underline; } } /* .p-header-language */ .p-header-language { grid-area: language; } @media only screen and (min-width: 1251px) { .p-header-language { display: flex; align-items: center; } } .p-header-language__inner { padding: 0.5rem 1rem; border-bottom: 1px solid var(--color-line); } @media only screen and (min-width: 1251px) { .p-header-language__inner { display: flex; padding: 0; border-bottom: 0; } } .p-header-language__link { padding: 0.5rem 0; font-size: 0.875rem; } @media only screen and (min-width: 1251px) { .p-header-language__link { padding: 0; margin-left: 1.5rem; font-size: 0.75rem; } .p-header-language__link:hover, .p-header-language__link:active, .p-header-language__link:focus-visible { text-decoration: underline; } } .p-header-language__link-text { display: flex; align-items: center; } .p-header-language__link-text::before { display: block; content: ""; width: 0.9375rem; height: 0.9375rem; background-image: url("/assets/common/images/icon/icon-globe-gray-01.svg"); background-repeat: no-repeat; margin-right: 0.5rem; } .p-header-language__group-link { padding: 0.5rem 0; font-size: 0.875rem; } @media only screen and (min-width: 1251px) { .p-header-language__group-link { padding: 0; margin-left: 1.5rem; font-size: 0.75rem; } .p-header-language__group-link:hover, .p-header-language__group-link:active, .p-header-language__group-link:focus-visible { text-decoration: underline; } } .p-header-language__group-link-text { display: flex; align-items: center; } @media only screen and (min-width: 1251px) { .p-header-language__group-link-text { font-weight: bold; } } /* .p-header-search-form */ .p-header-search-form { grid-area: search-form; transition: height var(--transition-duration); } @media only screen and (min-width: 1251px) { .p-header-search-form { background-color: var(--color-bg-box); border-bottom: 1px solid var(--color-line); } } .p-header-search-form__inner { padding: 1rem; } .p-header-search-form__group { position: relative; max-width: 50rem; margin: 0 auto; } .p-header-search-form__group::after { background-color: var(--color-line); content: ""; display: block; height: 1.5rem; position: absolute; right: 3.0625rem; top: 50%; transform: translateY(-50%); width: 1px; } .p-header-search-form__input { background-color: var(--color-white); border: 1px solid var(--color-line-input-box); padding: 0.5rem 3.125rem 0.5rem 1rem; width: 100%; } .p-header-search-form__btn { display: block; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); } [data-script-enabled=true] .p-header-search-form { display: none; overflow: hidden; } [data-script-enabled=true] .p-header-search-form.is-open { display: block; } /* .p-header-products */ .p-header-products { position: relative; background-color: var(--color-white); padding: 0.75rem 1rem 0; z-index: var(--zindex-header-products); } .p-header-products.is-hidden { display: none; } @media only screen and (min-width: 1251px) { .p-header-products { padding: 0 1.5rem; } .is-sticky .p-header-products { border-bottom: 1px solid var(--color-line); } } .p-header-products__inner { max-width: var(--width-max-content); border-bottom: 1px solid var(--color-line); margin: 0 auto; } .is-sticky .p-header-products .p-header-products__inner { display: flex; align-items: flex-end; justify-content: space-between; } @media only screen and (min-width: 1251px) { .is-sticky .p-header-products .p-header-products__inner { border: none; } } .p-header-products__category { display: flex; gap: 0.25rem; margin-bottom: 0.25rem; } @media only screen and (min-width: 1251px) { .p-header-products__category { gap: 0.5rem; } } .is-sticky .p-header-products .p-header-products__category { display: none; } .p-header-products__category-label { font-size: 0.75rem; color: var(--color-white); background-color: var(--color-icon-new); padding: 0.125rem 0.25rem; } @media only screen and (min-width: 1251px) { .p-header-products__category-label { font-size: 0.875rem; } } .p-header-products__category-label--02 { background-color: var(--color-icon-discontinued); } .p-header-products__category-label--03 { color: var(--color-font-default); background-color: var(--color-icon); } .p-header-products__title { font-size: 1.75rem; margin-bottom: 0.5rem; } @media only screen and (min-width: 1251px) { .p-header-products__title { font-size: 2.5rem; } } .is-sticky .p-header-products .p-header-products__title { flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .p-header-products__title-sub::before { content: ''; display: inline-block; margin-right: 0.5rem; } @media only screen and (min-width: 1251px) { .p-header-products__title-sub::before { margin-right: 0.75rem; } } .p-header-products__title-sub { font-size: 1rem; color: var(--color-font-sub); } @media only screen and (min-width: 1251px) { .p-header-products__title-sub { font-size: 1.25rem; } } .is-sticky .p-header-products .p-header-products__title-sub { display: none; } .p-header-products__nav { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; } @media only screen and (min-width: 1251px) { .p-header-products__nav { align-items: center; margin: 0; } } .p-header-products__nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3125rem; color: var(--color-main); font-size: 0.875rem; font-weight: bold; } @media only screen and (min-width: 1251px) { .p-header-products__nav-btn { display: none; } } .p-header-products__nav-btn::after { content: ""; display: block; width: 13px; height: 7px; background-image: url("/assets/common/images/icon/icon-arrow-down-violet-01.svg"); background-size: contain; background-repeat: no-repeat; transition: transform var(--transition-duration); } .p-header-products__nav.is-open .p-header-products__nav-btn::after { transform: rotate(-180deg); } .p-header-products__nav-list { display: none; overflow: hidden; transition: height var(--transition-duration); } @media only screen and (min-width: 1251px) { .p-header-products__nav-list { display: flex; } } .p-header-products__nav.is-open .p-header-products__nav-list { position: absolute; top: 100%; left: 0; display: block; width: 100%; background-color: var(--color-white); box-shadow: 0 0.375rem 0.375rem var(--color-box-shadow); z-index: var(--zindex-header-products); } .p-header-products__nav-list__item { padding: 0 1rem; } @media only screen and (max-width: 1250px) { .p-header-products__nav-list__item:last-child .p-header-products__nav-list__anchor { border-bottom: 0; } } .p-header-products__nav-list__anchor { display: block; color: var(--color-main); border-bottom: 1px solid var(--color-line); padding: 0.75rem 0; } @media only screen and (min-width: 1251px) { .p-header-products__nav-list__anchor { font-weight: bold; font-size: 1.125rem; border: none; } .p-header-products__nav-list__anchor:hover, .p-header-products__nav-list__anchor:active, .p-header-products__nav-list__anchor:focus-visible { border-bottom: 3px solid var(--color-main); } } .p-header-products__nav-list__anchor.is-current { font-weight: bold; } @media only screen and (min-width: 1251px) { .p-header-products__nav-list__anchor.is-current { border-bottom: 3px solid var(--color-main); } } .p-header-products__nav-list:nth-last-of-type() > li > a { background-color: var(--color-main); border: none; } .p-header-products__nav-conversion { display: flex; gap: 0.75rem; margin-left: 1rem; align-items: center; } .p-header-products__nav-conversion__btn { color: var(--color-main); font-size: 0.875rem; background-color: var(--color-btn); border-radius: 25px; padding: 0.25rem 1rem; } .p-header-products__nav-conversion__btn:not([class*=p-header-products__nav-conversion__btn--]):hover, .p-header-products__nav-conversion__btn:not([class*=p-header-products__nav-conversion__btn--]):active, .p-header-products__nav-conversion__btn:not([class*=p-header-products__nav-conversion__btn--]):focus-visible { color: #693e90; background-color: #e2bff0; } .is-sticky .p-header-products .p-header-products__nav-conversion__btn { width: 40px; height: 40px; background-image: url("/assets/common/images/icon/icon-location-violet-01.svg"); background-repeat: no-repeat; background-position: center; background-size: 18px 26px; } @media only screen and (min-width: 1251px) { .is-sticky .p-header-products .p-header-products__nav-conversion__btn { width: auto; height: auto; background-image: none; } } @media only screen and (min-width: 1251px) { .p-header-products__nav-conversion__btn { padding: 0.375rem 1.25rem; font-size: 1rem; } } .is-sticky .p-header-products .p-header-products__nav-conversion__btn-alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } @media only screen and (min-width: 1251px) { .is-sticky .p-header-products .p-header-products__nav-conversion__btn-alt { position: static; } } .p-header-products__nav-conversion__btn--02 { color: var(--color-white); background-color: var(--color-main); } .p-header-products__nav-conversion__btn--02:hover, .p-header-products__nav-conversion__btn--02:active, .p-header-products__nav-conversion__btn--02:focus-visible { opacity: var(--opacity-images); } .is-sticky .p-header-products .p-header-products__nav-conversion__btn--02 { background-image: url("/assets/common/images/icon/icon-cart-white-01.svg"); background-size: 20px; } @media only screen and (min-width: 1251px) { .is-sticky .p-header-products .p-header-products__nav-conversion__btn--02 { background-image: none; } } /* .p-header-overlay */ .p-header-overlay { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background-color: #191d1f; opacity: 0.6; z-index: var(--zindex-header-overlay); } /* Footer --- */ /* .p-footer-nav */ .p-footer-nav { background-color: #222; } @media only screen and (min-width: 769px) { .p-footer-nav { padding: 0 1.5rem; } } .p-footer-nav__inner { max-width: var(--width-max-content); margin: 0 auto; } @media only screen and (min-width: 769px) { .p-footer-nav__inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; gap: 2.125rem; padding: 2rem 0; } } .p-footer-nav__item-group { border-bottom: 1px solid var(--color-line); overflow: hidden; } @media only screen and (min-width: 769px) { .p-footer-nav__item-group { border-bottom: 0; } .p-footer-nav__item-group + .p-footer-nav__item-group { padding-top: 2rem; } } .p-footer-nav__hdg { padding: 0 1rem; font-size: 1rem; color: #fff; font-family: var(--font-family-hdg); } @media only screen and (min-width: 769px) { .p-footer-nav__hdg { padding: 0 0 1.25rem; } .p-footer-nav__hdg:last-child { padding-bottom: 0; } } @media only screen and (max-width: 768px) { .p-footer-nav__hdg .c-link-icon { display: none; } } .p-footer-nav__hdg-link { display: block; color: #fff; padding: 0.75rem 0; } .p-footer-nav__hdg-link[aria-expanded] { display: grid; grid-template-columns: 1fr 1.25rem; grid-template-areas: ". footer-nav-icon"; gap: 1.25rem; align-items: center; } .p-footer-nav__hdg-link[aria-expanded]::after { grid-area: footer-nav-icon; justify-self: right; display: block; content: ""; width: 0.8125rem; height: 0.4375rem; background-image: url("/assets/common/images/icon/icon-arrow-up-white-01.svg"); background-repeat: no-repeat; transform-origin: center; transition: transform var(--transition-duration); } .p-footer-nav__hdg-link[aria-expanded=false]::after { transform: rotate(180deg); } @media only screen and (min-width: 769px) { .p-footer-nav__hdg-link { padding: 0; } .p-footer-nav__hdg-link[href]:hover, .p-footer-nav__hdg-link[href]:active, .p-footer-nav__hdg-link[href]:focus-visible { text-decoration: underline; } } .p-footer-nav__list { margin: 0 1rem; transition: height var(--transition-duration); } @media only screen and (min-width: 769px) { .p-footer-nav__list { margin: 0; } } .p-footer-nav__list-item { border-top: 1px solid var(--color-line); } @media only screen and (min-width: 769px) { .p-footer-nav__list-item { border-top: 0; font-size: 0.8125rem; } .p-footer-nav__list-item + .p-footer-nav__list-item { padding-top: 0.25rem; } } @media only screen and (min-width: 769px) { .p-footer-nav__list-item--top { display: none; } } .p-footer-nav__list-link { display: block; padding: 0.75rem 0; color: #fff; } @media only screen and (min-width: 769px) { .p-footer-nav__list-link { padding: 0; } .p-footer-nav__list-link:hover, .p-footer-nav__list-link:active, .p-footer-nav__list-link:focus-visible { text-decoration: underline; } } /* .p-footer-language */ .p-footer-language { padding: 0 1rem; background-color: #222; } @media only screen and (min-width: 769px) { .p-footer-language { padding: 0 1.5rem; } } .p-footer-language__inner { max-width: var(--width-max-content); padding: 1.25rem 0; margin: 0 auto; } @media only screen and (min-width: 769px) { .p-footer-language__inner { display: flex; justify-content: space-between; border-top: 1px solid var(--color-line); } } .p-footer-language__link { align-items: center; } .p-footer-language__link-text { display: flex; align-items: center; color: #fff; font-size: 0.875rem; } @media only screen and (min-width: 769px) { .p-footer-language__link-text:hover, .p-footer-language__link-text:active, .p-footer-language__link-text:focus-visible { text-decoration: underline; } } .p-footer-language__link-text::before { content: url("/assets/common/images/icon/icon-globe-white-01.svg"); display: block; padding-right: 0.5rem; } .p-footer-language__group-link { padding-top: 1rem; } @media only screen and (min-width: 769px) { .p-footer-language__group-link { padding-top: 0; } } .p-footer-language__group-link-text { font-size: 0.875rem; color: #fff; } @media only screen and (min-width: 769px) { .p-footer-language__group-link-text:hover, .p-footer-language__group-link-text:active, .p-footer-language__group-link-text:focus-visible { text-decoration: underline; } } /* .p-footer-sns */ .p-footer-sns { background-color: #585858; color: #fff; padding: 0 1rem; } @media only screen and (min-width: 769px) { .p-footer-sns { padding: 0 1.5rem; } } .p-footer-sns__inner { max-width: var(--width-max-content); padding: 0.5rem 0; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 769px) { .p-footer-sns__inner { padding: 1rem 0; } } .p-footer-sns__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .p-footer-sns__list-link { display: flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 4.5rem; transition: opacity var(--transition-duration); } .p-footer-sns__list-link:hover, .p-footer-sns__list-link:active, .p-footer-sns__list-link:focus-visible { opacity: 0.7; } .p-footer-sns__icon--facebook { width: 40px; } .p-footer-sns__icon--twitter { width: 40px; } .p-footer-sns__icon--instagram { width: 40px; } .p-footer-sns__icon--youtube { width: 40px; } .p-footer-sns__icon--linkedin { width: 48px; } .p-footer-sns__icon--discord { width: 40px; } .p-footer-sns__icon--tiktok { width: 34px; } /* .p-footer-bottom */ .p-footer-bottom { background-color: #222; padding: 0 1rem; } @media only screen and (min-width: 769px) { .p-footer-bottom { padding: 0 1.5rem; } } .p-footer-bottom__inner { max-width: var(--width-max-content); padding: 1.25rem 0; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 769px) { .p-footer-bottom__inner { display: flex; justify-content: space-between; } } .p-footer-bottom__utility-list { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; justify-content: center; } .p-footer-bottom__utility-list-item { font-size: 0.875rem; } @media only screen and (min-width: 769px) { .p-footer-bottom__utility-list-item { font-size: 0.75rem; } } .p-footer-bottom__utility-list-link { color: #fff; } .p-footer-bottom__copyright { padding-top: 1rem; margin-top: 1rem; margin-left: -1rem; margin-right: -1rem; border-top: 1px solid var(--color-line); text-align: center; } @media only screen and (min-width: 769px) { .p-footer-bottom__copyright { padding-top: 0; margin-top: 0; margin-left: 0; margin-right: 0; border-top: 0; } } .p-footer-bottom__copyright-text { color: #fff; font-size: 0.75rem; } /* .p-footer-banner */ .p-footer-banner { background-color: #eee; padding: 1.5rem 1rem; } @media only screen and (min-width: 769px) { .p-footer-banner { padding: 1.5rem 1.5rem; } } .p-footer-banner__inner { max-width: var(--width-max-content); margin: 0 auto; } .p-footer-banner__list, .p-footer-banner__list1, .p-footer-banner__list2, .p-footer-banner__list3, .p-footer-banner__list4 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6875rem; } @media only screen and (min-width: 769px) { .p-footer-banner__list { grid-template-columns: repeat(4, minmax(auto, 224px)); gap: 1.25rem; justify-content: center; } } @media only screen and (min-width: 769px) { .p-footer-banner__list1 { grid-template-columns: repeat(1, minmax(auto, 224px)); gap: 1.25rem; justify-content: center; } } @media only screen and (min-width: 769px) { .p-footer-banner__list2 { grid-template-columns: repeat(2, minmax(auto, 224px)); gap: 1.25rem; justify-content: center; } } @media only screen and (min-width: 769px) { .p-footer-banner__list3 { grid-template-columns: repeat(3, minmax(auto, 224px)); gap: 1.25rem; justify-content: center; } } @media only screen and (min-width: 769px) { .p-footer-banner__list4 { grid-template-columns: repeat(4, minmax(auto, 224px)); gap: 1.25rem; justify-content: center; } } .p-footer-banner__link { display: block; transition: opacity var(--transition-duration); } @media only screen and (min-width: 769px) { .p-footer-banner__link:hover, .p-footer-banner__link:active, .p-footer-banner__link:focus-visible { opacity: 0.7; } } .p-footer-banner__link img { display: block; width: 100%; } @media only screen and (min-width: 769px) { .p-footer-banner__link img { width: auto; } } /* .p-footer-banner-carousel */ .p-footer-banner-carousel { background-color: #eee; } .p-footer-banner-carousel__container { position: relative; max-width: var(--width-max-content); padding: 1.5rem 1rem; margin: 0 auto; } @media only screen and (min-width: 769px) { .p-footer-banner-carousel__container { padding: 1.5rem 1.5rem; } } .p-footer-banner-carousel__inner { display: flex; width: 100%; padding: 0 1.25rem; margin: 0 auto; } @media only screen and (min-width: 769px) { .p-footer-banner-carousel__inner { justify-content: center; padding: 0 3.25rem; } } .p-footer-banner-carousel__inner .splide__track { width: 100%; } .p-footer-banner-carousel__link { display: block; transition: opacity var(--transition-duration); } @media only screen and (min-width: 769px) { .p-footer-banner-carousel__link:hover, .p-footer-banner-carousel__link:active, .p-footer-banner-carousel__link:focus-visible { opacity: 0.7; } } .p-footer-banner-carousel__link img { display: block; width: 100%; } .p-footer-banner-carousel .p-carousel__arrow-item--preview { left: 0; } .p-footer-banner-carousel .p-carousel__arrow-item--next { right: 0; } /* Navigation --- */ /* .p-nav-fixed-menu */ .p-nav-fixed-menu { background-color: #222; color: #fff; width: 100%; pointer-events: all; } @media only screen and (min-width: 769px) { .p-nav-fixed-menu { position: relative; right: calc(-100% + 3.125rem + 1px); display: block; width: -moz-fit-content; width: fit-content; min-width: 9.375rem; /*border-bottom: 1px solid #fff;*/ transition: right var(--transition-duration); will-change: right; line-height: 0; } .p-nav-fixed-menu:hover, .p-nav-fixed-menu:active, .p-nav-fixed-menu:focus-visible { right: 0; } .p-nav-fixed-menu:hover .p-nav-fixed-menu__close::before, .p-nav-fixed-menu:active .p-nav-fixed-menu__close::before, .p-nav-fixed-menu:focus-visible .p-nav-fixed-menu__close::before { left: 50%; transform: translate(-50%, -50%) rotate(45deg); } .p-nav-fixed-menu:hover .p-nav-fixed-menu__close::after, .p-nav-fixed-menu:active .p-nav-fixed-menu__close::after, .p-nav-fixed-menu:focus-visible .p-nav-fixed-menu__close::after { left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .l-nav-fixed-menu.is-focus .p-nav-fixed-menu { right: 0; } .l-nav-fixed-menu.is-focus .p-nav-fixed-menu .p-nav-fixed-menu__close::before { left: 50%; transform: translate(-50%, -50%) rotate(45deg); } .l-nav-fixed-menu.is-focus .p-nav-fixed-menu .p-nav-fixed-menu__close::after { left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } } .p-nav-fixed-menu__list { display: flex; } @media only screen and (min-width: 769px) { .p-nav-fixed-menu__list { flex-direction: column; } } .p-nav-fixed-menu__item { flex: 1 1 auto; border: 1px solid #fff; border-width: 1px 0 0 1px; font-family: var(--font-family-hdg); } .p-nav-fixed-menu__item:first-child { border-left-width: 0; } @media only screen and (min-width: 769px) { .p-nav-fixed-menu__item:first-child { border-left-width: 1px; } } .p-nav-fixed-menu__item-inner { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; min-width: 3.125rem; min-height: 3.125rem; padding: 0.625rem 0.625rem 0.25rem; text-align: center; color: #fff; } @media only screen and (min-width: 769px) { .p-nav-fixed-menu__item-inner { flex-direction: row-reverse; justify-content: flex-end; padding: 0.625rem 0; } } .p-nav-fixed-menu__text { font-size: 0.875rem; } @media only screen and (min-width: 769px) { .p-nav-fixed-menu__text { font-size: 1rem; padding-right: 1rem; } } .p-nav-fixed-menu__image { margin-bottom: 0.3125rem; } @media only screen and (min-width: 769px) { .p-nav-fixed-menu__image { display: flex; align-items: center; justify-content: center; width: 3.125rem; margin-bottom: 0; } } .p-nav-fixed-menu__icon { display: block; } .p-nav-fixed-menu__close { background-color: #222; position: absolute; right: 0; top: -2.8125rem; width: 2.8125rem; height: 2.8125rem; border: 1px solid #fff; border-width: 1px 0 1px 1px; } @media only screen and (min-width: 769px) { .p-nav-fixed-menu__close { position: relative; top: 0; width: 100%; height: 2.5rem; } } .p-nav-fixed-menu__close::before, .p-nav-fixed-menu__close::after { position: absolute; content: ""; display: block; width: 1.25rem; height: 0.1875rem; top: 50%; left: 50%; background-color: #fff; border-radius: 1em; } @media only screen and (min-width: 769px) { .p-nav-fixed-menu__close::before, .p-nav-fixed-menu__close::after { left: 1rem; transition: left var(--transition-duration); will-change: left; } } .p-nav-fixed-menu__close::before { transform: translate(-50%, -50%) rotate(45deg); } @media only screen and (min-width: 769px) { .p-nav-fixed-menu__close::before { transform: translate(0, -50%) rotate(45deg); } } .p-nav-fixed-menu__close::after { transform: translate(-50%, -50%) rotate(-45deg); } @media only screen and (min-width: 769px) { .p-nav-fixed-menu__close::after { transform: translate(0, -50%) rotate(-45deg); } } .p-nav-fixed-menu__close-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* To pagetop --- */ /* .p-to-pagetop */ @media only screen and (min-width: 769px) { .p-to-pagetop { position: absolute; top: -3rem; right: 1.5rem; z-index: var(--zindex-to-pagetop); } .p-to-pagetop__btn { position: relative; display: block; width: 2.25rem; height: 2.25rem; background-color: #fff; border: 1px solid var(--color-main); border-radius: 50%; } .p-to-pagetop__image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--zindex-layer1); } } /* Mainvisual --- */ /* .p-mainvisual */ .p-mainvisual__img { width: 100%; height: 100%; } .p-mainvisual__img-item { object-fit: cover; overflow: hidden; object-position: center; display: block; width: 100%; height: 100%; } /* Important-Notice --- */ /* .p-important-notice */ .p-important-notice { background-color: #eee; padding: 1rem; } .p-important-notice__inner { max-width: var(--width-max-content); margin: 0 auto; } /* heading * ---------------------------- */ /* .p-heading-1 --- */ .p-heading-1 { margin: 0.75rem 0; } .l-inner > .p-heading-1 { margin-bottom: 0.75rem; padding-top: 0.75rem; } @media only screen and (min-width: 769px) { .l-inner > .p-heading-1 { padding-top: 0; } } .l-inner > .p-heading-1--wide { margin-bottom: 3.75rem; } @media only screen and (min-width: 769px) { .l-inner > .p-heading-1--wide { margin-bottom: 4rem; } } @media only screen and (min-width: 769px) { .p-heading-1 { margin-bottom: 0.75rem; margin-top: 1.5rem; } } .p-heading-1--wide { margin: 0.75rem 0 3.75rem; } @media only screen and (min-width: 769px) { .p-heading-1--wide { margin-bottom: 4rem; margin-top: 1.5rem; } } /* .p-heading-attach --- */ .p-heading-attach { margin-bottom: 3rem; margin-top: 0.75rem; } @media only screen and (min-width: 769px) { .p-heading-attach { margin-bottom: 4rem; margin-top: 1.5rem; } } .p-heading-attach__head + .p-heading-attach__body { margin-top: 0.75rem; } .p-heading-attach__body { display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.75rem; } @media only screen and (min-width: 769px) { .p-heading-attach__body { flex-direction: row; } } .p-heading-attach__list { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 0.5rem; } .p-heading-attach__item { flex: 0 0 auto; } .p-heading-attach__label { background-color: var(--color-bg-box); font-size: 0.875rem; padding: 0.125rem 0.5rem; } .p-heading-attach__date { flex: 0 0 auto; margin-left: auto; } /* .p-heading-2 --- */ .p-heading-2 { margin-bottom: 2.5rem; margin-top: 4rem; } @media only screen and (min-width: 769px) { .p-heading-2 { margin-top: 4.5rem; } .p-heading-2 + .p-heading-3 { margin-top: 3rem; } } /* .p-heading-2-type2 --- */ .p-heading-2-type2 { margin-bottom: 1.5rem; } /* .p-heading-2-type3 --- */ .p-heading-2-type3 { margin-bottom: 2.5rem; } /* .p-heading-icon --- */ .p-heading-icon { margin-bottom: 2.5rem; margin-top: 4rem; } @media only screen and (min-width: 769px) { .p-heading-icon { margin-top: 4.5rem; } } .p-heading-icon--center { text-align: center; } /* .p-heading-3 --- */ .p-heading-3 { margin-bottom: 1.5rem; margin-top: 3rem; } .p-layout__content > .p-heading-3 { margin-bottom: 1rem; } @media only screen and (min-width: 769px) { .p-heading-3 { margin-bottom: 2.5rem; margin-top: 3.75rem; } .p-layout__content > .p-heading-3 { margin-bottom: 1.5rem; } } /* .p-heading-4 --- */ .p-heading-4 { margin-bottom: 1rem; margin-top: 2rem; } @media only screen and (min-width: 769px) { .p-heading-4 { margin-bottom: 1.5rem; margin-top: 2.5rem; } } /* .p-heading-sub --- */ .p-heading-sub { margin-bottom: 0.75rem; margin-top: 2rem; } .p-heading-toggle { display: grid; gap: 3rem; } .p-heading-toggle__btn { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--color-line); width: 100%; } .p-heading-toggle__btn:hover { color: var(--color-main); border-bottom: 1px solid var(--color-main); } .p-heading-toggle__btn[aria-expanded=true] .p-heading-toggle__icon-open { display: none; } .p-heading-toggle__btn[aria-expanded=false] .p-heading-toggle__icon-close { display: none; } .p-heading-toggle__icon-open, .p-heading-toggle__icon-close { min-width: 28px; width: 28px; height: 28px; } @media only screen and (min-width: 769px) { .p-heading-toggle__icon-open, .p-heading-toggle__icon-close { min-width: 32px; width: 32px; height: 32px; } } .p-heading-toggle__btn-txt { padding-bottom: 0.5rem; } .p-heading-toggle__content-wrap { overflow: hidden; transition: height var(--transition-duration); } .p-heading-toggle__content { padding-top: 2rem; } /* .p-heading-movie --- */ .p-heading-movie { margin-bottom: 2.5rem; } .p-heading-movie__video-wrap { position: relative; width: 100%; overflow: hidden; } @media only screen and (max-width: 768px) { .p-heading-movie__video-wrap { display: none; } } .p-heading-movie__video { width: 100%; height: auto; vertical-align: bottom; } .p-heading-movie__control { position: absolute; bottom: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-main); background-color: var(--color-white); } .p-heading-movie__control::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 12px; transform: translate(-50%, -50%); background-image: url("/assets/common/images/icon/icon-video-pause-violet-01.svg"); background-repeat: no-repeat; } .p-heading-movie__control.is-pause::before { left: 55%; width: 8px; height: 10px; background-image: url("/assets/common/images/icon/icon-video-play-violet-01.svg"); } .p-heading-movie__control-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-heading-movie__narrow-img-wrap { width: 100%; } @media only screen and (min-width: 769px) { .p-heading-movie__narrow-img-wrap { display: none; } } .p-heading-movie__narrow-img { width: 100%; vertical-align: bottom; } /* .p-heading-movie --- */ .p-heading-products { display: flex; align-items: center; margin-bottom: 1.5rem; } @media only screen and (min-width: 769px) { .p-heading-products { margin-bottom: 2.5rem; } } .p-heading-products .c-heading-3 { margin-right: 1rem; } .p-heading-products .p-label { margin-bottom: 0; } /* Dialog --- */ /* .p-dialog */ .p-dialog { position: fixed; inset: 0; width: calc(100% - 2rem); height: max-content; max-height: calc(100vh - 7rem); max-width: var(--width-max-content); background-color: #fff; overflow-y: auto; margin: auto; z-index: var(--zindex-overlay); } .p-dialog::-webkit-backdrop { background-color: #191d1f; opacity: 0.6; } .p-dialog::backdrop { background-color: #191d1f; opacity: 0.6; } .p-dialog__inner { position: relative; padding: 3rem 1rem; } .p-dialog__inner > :first-child { margin-top: 0; } .p-dialog__inner > :last-child { margin-bottom: 0; } @media only screen and (min-width: 769px) { .p-dialog__inner { padding: 3rem; } } .p-dialog__inner .p-table { margin-bottom: 24px; } .p-dialog__btn-close { position: absolute; top: 0.9375rem; right: 0.9375rem; width: 0.9375rem; height: 0.9375rem; } .p-dialog__btn-close::before, .p-dialog__btn-close::after { position: absolute; content: ""; display: block; width: 1.25rem; height: 0.1875rem; background-color: var(--color-main); } .p-dialog__btn-close::before { transform: rotate(45deg); box-shadow: none; border-radius: 1rem; } .p-dialog__btn-close::after { transform: rotate(-45deg); border-radius: 1rem; } .p-dialog__btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* .p-dialog-select-language */ .p-dialog-select-language { position: fixed; inset: 0; width: calc(100% - 2rem); height: max-content; max-height: calc(100vh - 7rem); max-width: var(--width-max-content); background-color: #fff; overflow-y: auto; margin: auto; z-index: var(--zindex-overlay); } .p-dialog-select-language::-webkit-backdrop { background-color: #191d1f; opacity: 0.6; } .p-dialog-select-language::backdrop { background-color: #191d1f; opacity: 0.6; } .p-dialog-select-language__inner { position: relative; } @media only screen and (min-width: 769px) { .p-dialog-select-language__inner { padding: 3rem; } } .p-dialog-select-language__inner .p-table { margin-bottom: 24px; } .p-dialog-select-language__btn-close { position: absolute; top: 0.9375rem; right: 0.9375rem; width: 0.9375rem; height: 0.9375rem; } .p-dialog-select-language__btn-close::before, .p-dialog-select-language__btn-close::after { position: absolute; content: ""; display: block; width: 1.25rem; height: 0.1875rem; background-color: var(--color-main); } .p-dialog-select-language__btn-close::before { transform: rotate(45deg); box-shadow: none; border-radius: 1rem; } .p-dialog-select-language__btn-close::after { transform: rotate(-45deg); border-radius: 1rem; } .p-dialog-select-language__btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-dialog-select-language__hdg { padding: 1rem; font-size: 1.25rem; text-align: center; } @media only screen and (min-width: 769px) { .p-dialog-select-language__hdg { padding: 0 0 1.5rem; font-size: 1.875rem; } } .p-dialog-select-language__group { border-bottom: 1px solid var(--color-line); } @media only screen and (min-width: 769px) { .p-dialog-select-language__group { border-bottom: 0; } .p-dialog-select-language__group + .p-dialog-select-language__group { padding-top: 3.75rem; } } .p-dialog-select-language__group:last-child { border-bottom: 0; } .p-dialog-select-language__title { position: relative; display: block; width: 100%; padding: 0.75rem 1rem; } @media only screen and (min-width: 769px) { .p-dialog-select-language__title { padding: 0; pointer-events: none; } } .p-dialog-select-language__title[aria-expanded] { display: grid; grid-template-columns: 1fr 1.25rem; grid-template-areas: ". select-language-icon"; gap: 1.25rem; align-items: center; } .p-dialog-select-language__title[aria-expanded]::after { grid-area: select-language-icon; justify-self: right; display: block; content: ""; width: 0.8125rem; height: 0.4375rem; background-image: url("/assets/common/images/icon/icon-arrow-up-violet-01.svg"); background-repeat: no-repeat; transform-origin: center; transform: rotate(180deg); transition: transform var(--transition-duration); } .p-dialog-select-language__title[aria-expanded=true]::after { transform: rotate(0deg); } .p-dialog-select-language__title-text { font-family: var(--font-family); } @media only screen and (min-width: 769px) { .p-dialog-select-language__title-text { padding-bottom: 0.75rem; font-family: var(--font-family-hdg); font-size: 1.5rem; } } .p-dialog-select-language__list { padding: 0 1rem; transition: height var(--transition-duration); overflow: hidden; } @media only screen and (min-width: 769px) { .p-dialog-select-language__list { display: grid; grid-template-columns: repeat(4, 25%); padding: 0; } } .p-dialog-select-language__item { border-top: 1px solid var(--color-line); } @media only screen and (min-width: 769px) { .p-dialog-select-language__item { border-top: 0; } } .p-dialog-select-language__link { display: block; padding: 0.75rem 0; } @media only screen and (min-width: 769px) { .p-dialog-select-language__link { width: -moz-fit-content; width: fit-content; } .p-dialog-select-language__link:hover, .p-dialog-select-language__link:active, .p-dialog-select-language__link:focus-visible { text-decoration: underline; color: var(--color-main); } } .p-dialog-select-language__text { display: flex; flex-direction: column; font-weight: bold; } .p-dialog-select-language__sub-text { font-size: 0.75rem; } /* text * ---------------------------- */ /* .p-text --- */ .p-text { margin-bottom: 1.5rem; } @media only screen and (min-width: 769px) { .p-text { margin-bottom: 1.25rem; } } /* .p-text-lead --- */ .p-text-lead { margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-text-lead { margin-bottom: 0.25rem; } } .p-text-lead--narrow { margin-bottom: 0.25rem; } .p-text-lead--icon-exclamation { margin-bottom: 1.5rem; } @media only screen and (min-width: 769px) { .p-text-lead--icon-exclamation { margin-bottom: 1.25rem; } } /* .p-text-more --- */ .p-text-more { position: relative; margin-bottom: 0.75rem; padding-bottom: 1.25rem; } .p-text-more__item { transition: height var(--transition-duration); overflow: hidden; } .p-text-more__btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-text-more__btn { position: absolute; bottom: 0; display: block; width: 100%; min-height: 3.75rem; margin-top: 1rem; background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, var(--color-bg-default) 30%); } .p-text-more__btn::before { position: absolute; content: ""; display: block; right: 0; bottom: 1.25rem; left: 0; margin: 0 auto; width: 8px; height: 8px; border-top: 2px solid var(--color-main); border-right: 2px solid var(--color-main); transform: rotate(135deg); } .p-text-more__btn.is-hidden { display: none; } html:not([data-script-enabled=true]) .p-text-more__btn { display: none; } .p-text-more__btn[aria-expanded=true] { position: relative; inset: auto; min-height: 28px; margin-top: 0; background-image: none; } .p-text-more__btn[aria-expanded=true]::before { bottom: 0; transform: rotate(-45deg); } .p-text-more:has(.p-text-more__btn.is-hidden) { padding: 0; } html[data-script-enabled=true] .js-text-more.is-hidden { display: none; } /* Layout-features * ---------------------------- */ .p-layout-features { display: flex; gap: 1.5rem; flex-direction: column-reverse; margin-bottom: 2rem; } .p-layout-features__media { flex: 0 0 auto; text-align: center; } .p-layout-features__content-list { display: grid; gap: 1.5rem; } .p-layout-features__content-link { display: inline-block; } .p-layout-features__content-link:hover, .p-layout-features__content-link:active, .p-layout-features__content-link:focus-visible { color: var(--color-main); text-decoration: underline; } .p-layout-features__content-title { font-family: var(--font-family-hdg); font-size: 1.25rem; } .p-layout-features__media-item, .p-layout-features__content-media-item { vertical-align: bottom; } .p-layout-features__content-panel { display: flex; flex-direction: row-reverse; justify-content: flex-end; column-gap: 12px; } .p-layout-features__content-panel:hover .p-layout-features__content-media, .p-layout-features__content-panel:active .p-layout-features__content-media, .p-layout-features__content-panel:focus-visible .p-layout-features__content-media { opacity: var(--opacity-images); } .p-layout-features__content-panel:hover .p-layout-features__content-title, .p-layout-features__content-panel:active .p-layout-features__content-title, .p-layout-features__content-panel:focus-visible .p-layout-features__content-title { color: var(--color-main); text-decoration: underline; } .p-layout-features__content-media { width: 100px; flex: 0 0 auto; text-align: center; } .p-layout-features__content-text { margin-top: 0.5rem; } @media only screen and (min-width: 769px) { .p-layout-features { margin-bottom: 3rem; flex-direction: row; justify-content: space-between; } .p-layout-features__media { max-width: 32%; } .p-layout-features__content-list { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } .p-layout-features__content-title { font-size: 1.5rem; } .p-layout-features--row-reverse { flex-direction: row-reverse; justify-content: flex-end; } .p-layout-features--no-media { display: block; } .p-layout-features--no-media .p-layout-features__content-list { grid-template-columns: repeat(3, 1fr); } } /* layout * ---------------------------- */ /* .p-layout */ .p-layout__content.is-hidden { display: none; } .p-layout__content--bg-gray { padding: 1.5rem 1rem; background-color: #f3f3f3; } @media only screen and (min-width: 769px) { .p-layout__content--bg-gray { padding: 2rem; } } .p-layout__content--bg-gray .p-list-more__btn { background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #f3f3f3 70%); } @media only screen and (max-width: 768px) { .p-layout { margin-bottom: 2rem; } .p-layout[data-col-narrow] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 1.5rem 0.625rem; } .p-layout[data-col-narrow] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout[data-col-narrow="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout[data-col-narrow="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0.625rem) / 2); max-width: calc((100% - 0.625rem) / 2); } .p-layout[data-col-narrow="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.25rem) / 3); max-width: calc((100% - 1.25rem) / 3); } .p-layout[data-col-narrow="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.875rem) / 4); max-width: calc((100% - 1.875rem) / 4); } .p-layout[data-col-narrow=auto] .p-layout__inner { justify-content: center; } .p-layout[data-col-narrow=auto] .p-layout__inner > .p-layout__content { flex-shrink: 1; } } @media only screen and (min-width: 769px) { .p-layout { margin-bottom: 3rem; } .p-layout[data-col-wide] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 2rem 1.5rem; } .p-layout[data-col-wide] .p-layout__inner > .p-layout__content { flex-shrink: 0; max-width: 100%; } .p-layout[data-col-wide="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout[data-col-wide="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } .p-layout[data-col-wide="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); } .p-layout[data-col-wide="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } .p-layout[data-col-wide="5"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 6rem) / 5); max-width: calc((100% - 6rem) / 5); } .p-layout[data-col-wide="6"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 7.5rem) / 6); max-width: calc((100% - 7.5rem) / 6); } } @media only screen and (max-width: 768px) { .p-layout-media[data-col-narrow] { margin-bottom: 2rem; } .p-layout-media[data-col-narrow][data-col-narrow] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 3rem 3rem; } .p-layout-media[data-col-narrow][data-col-narrow] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout-media[data-col-narrow][data-col-narrow="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout-media[data-col-narrow][data-col-narrow="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 2); max-width: calc((100% - 3rem) / 2); } .p-layout-media[data-col-narrow][data-col-narrow="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 6rem) / 3); max-width: calc((100% - 6rem) / 3); } .p-layout-media[data-col-narrow][data-col-narrow="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 9rem) / 4); max-width: calc((100% - 9rem) / 4); } .p-layout-media[data-col-narrow][data-col-narrow=auto] .p-layout__inner { justify-content: center; } .p-layout-media[data-col-narrow][data-col-narrow=auto] .p-layout__inner > .p-layout__content { flex-shrink: 1; } } @media only screen and (min-width: 769px) { .p-layout-media[data-col-narrow] { margin-bottom: 3rem; } .p-layout-media[data-col-narrow][data-col-wide] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 5.25rem 1.5rem; } .p-layout-media[data-col-narrow][data-col-wide] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout-media[data-col-narrow][data-col-wide="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout-media[data-col-narrow][data-col-wide="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } .p-layout-media[data-col-narrow][data-col-wide="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); } .p-layout-media[data-col-narrow][data-col-wide="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } .p-layout-media[data-col-narrow][data-col-wide="5"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 6rem) / 5); max-width: calc((100% - 6rem) / 5); } .p-layout-media[data-col-narrow][data-col-wide="6"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 7.5rem) / 6); max-width: calc((100% - 7.5rem) / 6); } } @media only screen and (max-width: 768px) { .p-layout-media--pattern-02[data-col-narrow] { margin-bottom: 2rem; } .p-layout-media--pattern-02[data-col-narrow][data-col-narrow] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 0.75rem 0.75rem; } .p-layout-media--pattern-02[data-col-narrow][data-col-narrow] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout-media--pattern-02[data-col-narrow][data-col-narrow="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout-media--pattern-02[data-col-narrow][data-col-narrow="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0.75rem) / 2); max-width: calc((100% - 0.75rem) / 2); } .p-layout-media--pattern-02[data-col-narrow][data-col-narrow="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 3); max-width: calc((100% - 1.5rem) / 3); } .p-layout-media--pattern-02[data-col-narrow][data-col-narrow="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 2.25rem) / 4); max-width: calc((100% - 2.25rem) / 4); } .p-layout-media--pattern-02[data-col-narrow][data-col-narrow=auto] .p-layout__inner { justify-content: center; } .p-layout-media--pattern-02[data-col-narrow][data-col-narrow=auto] .p-layout__inner > .p-layout__content { flex-shrink: 1; } } @media only screen and (min-width: 769px) { .p-layout-media--pattern-02[data-col-narrow] { margin-bottom: 3rem; } .p-layout-media--pattern-02[data-col-narrow][data-col-wide] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 1.5rem 1.5rem; } .p-layout-media--pattern-02[data-col-narrow][data-col-wide] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout-media--pattern-02[data-col-narrow][data-col-wide="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout-media--pattern-02[data-col-narrow][data-col-wide="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } .p-layout-media--pattern-02[data-col-narrow][data-col-wide="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); } .p-layout-media--pattern-02[data-col-narrow][data-col-wide="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } .p-layout-media--pattern-02[data-col-narrow][data-col-wide="5"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 6rem) / 5); max-width: calc((100% - 6rem) / 5); } .p-layout-media--pattern-02[data-col-narrow][data-col-wide="6"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 7.5rem) / 6); max-width: calc((100% - 7.5rem) / 6); } } .p-layout-media--pattern-02 .c-media { display: flex; } @media only screen and (max-width: 768px) { .p-layout--pattern-02 { margin-bottom: 2rem; } .p-layout--pattern-02[data-col-narrow] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 2.5rem 2rem; } .p-layout--pattern-02[data-col-narrow] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-02[data-col-narrow="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-02[data-col-narrow="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 2rem) / 2); max-width: calc((100% - 2rem) / 2); } .p-layout--pattern-02[data-col-narrow="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4rem) / 3); max-width: calc((100% - 4rem) / 3); } .p-layout--pattern-02[data-col-narrow="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 6rem) / 4); max-width: calc((100% - 6rem) / 4); } .p-layout--pattern-02[data-col-narrow=auto] .p-layout__inner { justify-content: center; } .p-layout--pattern-02[data-col-narrow=auto] .p-layout__inner > .p-layout__content { flex-shrink: 1; } } @media only screen and (min-width: 769px) { .p-layout--pattern-02 { margin-bottom: 3rem; } .p-layout--pattern-02[data-col-wide] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 2.5rem 2.5rem; } .p-layout--pattern-02[data-col-wide] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-02[data-col-wide="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-02[data-col-wide="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 2.5rem) / 2); max-width: calc((100% - 2.5rem) / 2); } .p-layout--pattern-02[data-col-wide="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 5rem) / 3); max-width: calc((100% - 5rem) / 3); } .p-layout--pattern-02[data-col-wide="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 7.5rem) / 4); max-width: calc((100% - 7.5rem) / 4); } .p-layout--pattern-02[data-col-wide="5"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 10rem) / 5); max-width: calc((100% - 10rem) / 5); } .p-layout--pattern-02[data-col-wide="6"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 12.5rem) / 6); max-width: calc((100% - 12.5rem) / 6); } } @media only screen and (max-width: 768px) { .p-layout--pattern-03 { margin-bottom: 2rem; } .p-layout--pattern-03[data-col-narrow] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 2.5rem 1.5rem; } .p-layout--pattern-03[data-col-narrow] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-03[data-col-narrow="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-03[data-col-narrow="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } .p-layout--pattern-03[data-col-narrow="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); } .p-layout--pattern-03[data-col-narrow="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } .p-layout--pattern-03[data-col-narrow=auto] .p-layout__inner { justify-content: center; } .p-layout--pattern-03[data-col-narrow=auto] .p-layout__inner > .p-layout__content { flex-shrink: 1; } } @media only screen and (min-width: 769px) { .p-layout--pattern-03 { margin-bottom: 3rem; } .p-layout--pattern-03[data-col-wide] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 2.5rem 2.5rem; } .p-layout--pattern-03[data-col-wide] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-03[data-col-wide="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-03[data-col-wide="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 2.5rem) / 2); max-width: calc((100% - 2.5rem) / 2); } .p-layout--pattern-03[data-col-wide="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 5rem) / 3); max-width: calc((100% - 5rem) / 3); } .p-layout--pattern-03[data-col-wide="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 7.5rem) / 4); max-width: calc((100% - 7.5rem) / 4); } .p-layout--pattern-03[data-col-wide="5"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 10rem) / 5); max-width: calc((100% - 10rem) / 5); } .p-layout--pattern-03[data-col-wide="6"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 12.5rem) / 6); max-width: calc((100% - 12.5rem) / 6); } } @media only screen and (max-width: 768px) { .p-layout--pattern-04 { margin-bottom: 2rem; } .p-layout--pattern-04[data-col-narrow] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 2rem 0.75rem; } .p-layout--pattern-04[data-col-narrow] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-04[data-col-narrow="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-04[data-col-narrow="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0.75rem) / 2); max-width: calc((100% - 0.75rem) / 2); } .p-layout--pattern-04[data-col-narrow="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 3); max-width: calc((100% - 1.5rem) / 3); } .p-layout--pattern-04[data-col-narrow="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 2.25rem) / 4); max-width: calc((100% - 2.25rem) / 4); } .p-layout--pattern-04[data-col-narrow=auto] .p-layout__inner { justify-content: center; } .p-layout--pattern-04[data-col-narrow=auto] .p-layout__inner > .p-layout__content { flex-shrink: 1; } } @media only screen and (min-width: 769px) { .p-layout--pattern-04 { margin-bottom: 3rem; } .p-layout--pattern-04[data-col-wide] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 2.5rem 1.5rem; } .p-layout--pattern-04[data-col-wide] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-04[data-col-wide="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-04[data-col-wide="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } .p-layout--pattern-04[data-col-wide="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); } .p-layout--pattern-04[data-col-wide="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } .p-layout--pattern-04[data-col-wide="5"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 6rem) / 5); max-width: calc((100% - 6rem) / 5); } .p-layout--pattern-04[data-col-wide="6"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 7.5rem) / 6); max-width: calc((100% - 7.5rem) / 6); } } @media only screen and (max-width: 768px) { .p-layout--pattern-05 { margin-bottom: 2rem; } .p-layout--pattern-05[data-col-narrow] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 2.5rem 1.5rem; } .p-layout--pattern-05[data-col-narrow] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-05[data-col-narrow="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-05[data-col-narrow="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } .p-layout--pattern-05[data-col-narrow="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); } .p-layout--pattern-05[data-col-narrow="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } .p-layout--pattern-05[data-col-narrow=auto] .p-layout__inner { justify-content: center; } .p-layout--pattern-05[data-col-narrow=auto] .p-layout__inner > .p-layout__content { flex-shrink: 1; } } @media only screen and (min-width: 769px) { .p-layout--pattern-05 { margin-bottom: 3rem; } .p-layout--pattern-05[data-col-wide] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 2.5rem 1.5rem; } .p-layout--pattern-05[data-col-wide] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-05[data-col-wide="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-05[data-col-wide="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } .p-layout--pattern-05[data-col-wide="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); } .p-layout--pattern-05[data-col-wide="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } .p-layout--pattern-05[data-col-wide="5"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 6rem) / 5); max-width: calc((100% - 6rem) / 5); } .p-layout--pattern-05[data-col-wide="6"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 7.5rem) / 6); max-width: calc((100% - 7.5rem) / 6); } } @media only screen and (max-width: 768px) { .p-layout--pattern-06 { margin-bottom: 2rem; } .p-layout--pattern-06[data-col-narrow] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 3rem 1.5rem; } .p-layout--pattern-06[data-col-narrow] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-06[data-col-narrow="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-06[data-col-narrow="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } .p-layout--pattern-06[data-col-narrow="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); } .p-layout--pattern-06[data-col-narrow="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } .p-layout--pattern-06[data-col-narrow=auto] .p-layout__inner { justify-content: center; } .p-layout--pattern-06[data-col-narrow=auto] .p-layout__inner > .p-layout__content { flex-shrink: 1; } } @media only screen and (min-width: 769px) { .p-layout--pattern-06 { margin-bottom: 3rem; } .p-layout--pattern-06[data-col-wide] .p-layout__inner { display: flex; flex-wrap: wrap; gap: 3.75rem 1.5rem; } .p-layout--pattern-06[data-col-wide] .p-layout__inner > .p-layout__content { flex-shrink: 0; } .p-layout--pattern-06[data-col-wide="1"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 0rem) / 1); max-width: calc((100% - 0rem) / 1); } .p-layout--pattern-06[data-col-wide="2"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); } .p-layout--pattern-06[data-col-wide="3"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 3rem) / 3); max-width: calc((100% - 3rem) / 3); } .p-layout--pattern-06[data-col-wide="4"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } .p-layout--pattern-06[data-col-wide="5"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 6rem) / 5); max-width: calc((100% - 6rem) / 5); } .p-layout--pattern-06[data-col-wide="6"] .p-layout__inner > .p-layout__content { flex-basis: calc((100% - 7.5rem) / 6); max-width: calc((100% - 7.5rem) / 6); } } /* media * ---------------------------- */ /* .p-media --- */ .p-media { line-height: 1; margin-bottom: 2rem; text-align: center; } @media only screen and (min-width: 769px) { .p-media { margin-bottom: 1.75rem; } } .p-media__wrap { color: var(--color-font-default); } @media only screen and (min-width: 769px) { .p-media__wrap:link:hover, .p-media__wrap:link:active, .p-media__wrap:link:focus-visible { opacity: 0.7; } } .p-media--align-left { text-align: left; } .p-media--pattern-01 { margin-top: 4rem; } @media only screen and (min-width: 769px) { .p-media--pattern-01 { margin-top: 5rem; } } /* .p-media-full --- */ .p-media-full { line-height: 1; margin-bottom: 2rem; text-align: center; } @media only screen and (min-width: 769px) { .p-media-full { margin-bottom: 1.75rem; } } .p-media-full__wrap { color: var(--color-font-default); margin-left: -1rem; margin-right: -1rem; } @media only screen and (min-width: 769px) { .p-media-full__wrap { margin-left: auto; margin-right: auto; } } /* .p-media-layout --- */ .p-media-layout { margin-bottom: 2.5rem; } .p-media-layout__inner { display: flex; flex-direction: column; gap: 0.5rem 0.75rem; } .p-media-layout__content { flex: 1 1 auto; width: 100%; } .p-media-layout__content > .c-heading-3 { margin-bottom: 0.75rem; } .p-media-layout__media { flex: 0 0 auto; line-height: 1; margin: auto; margin-top: 0; max-width: 100%; } .p-media-layout__media--audio, .p-media-layout__media--movie { width: 100%; } .p-media-layout--center .p-media-layout__inner { align-items: center; } .p-media-layout-02 .p-media-layout__inner { flex-direction: column; gap: 0; } .p-media-layout-02__hdg { margin-bottom: 1rem; margin-top: 0; } @media only screen and (min-width: 769px) { .p-media-layout-02__hdg { margin-bottom: 1.5rem; } } .p-media-layout-02__text { margin-bottom: 0; order: 3; } .p-media-layout-02__media { margin-bottom: 1.25rem; } .p-media-layout-02__link { order: 4; margin-top: 1rem; } @media only screen and (min-width: 769px) { .p-media-layout-02__link { margin-top: 1.5rem; } } .p-media-layout--mb-wide { margin-bottom: 3rem; } @media only screen and (min-width: 769px) { .p-media-layout--mb-wide { margin-bottom: 3.75rem; } } @media only screen and (max-width: 768px) { .p-media-layout--column-reverse-narrow .p-media-layout__inner { flex-direction: column-reverse; } .p-media-layout--row-narrow .p-media-layout__inner { flex-direction: row; } .p-media-layout--row-narrow .p-media-layout__media { max-width: 50%; } .p-media-layout--row-reverse-narrow .p-media-layout__inner { flex-direction: row-reverse; } .p-media-layout--row-reverse-narrow .p-media-layout__media { max-width: 50%; } } @media only screen and (min-width: 769px) { .p-media-layout__inner { flex-direction: row; gap: 1rem 1.5rem; } .p-media-layout__media { max-width: 50%; } .p-media-layout__media--audio { max-width: 50%; } .p-media-layout__media--movie { max-width: 35%; } .p-media-layout--row-reverse-wide .p-media-layout__inner { flex-direction: row-reverse; } .p-media-layout--column-wide .p-media-layout__inner { flex-direction: column; } .p-media-layout--column-wide .p-media-layout__media { max-width: 100%; } .p-media-layout--column-reverse-narrow .p-media-layout__content-side { max-width: 50%; word-wrap: break-word; } .p-media-layout--column-reverse-wide .p-media-layout__inner { flex-direction: column-reverse; } .p-media-layout--column-reverse-wide .p-media-layout__media { max-width: 100%; } } /* .p-media-movie --- */ .p-media-movie { margin-bottom: 4rem; } @media only screen and (min-width: 769px) { .p-media-movie { margin-bottom: 5rem; } } .p-media-movie--bottom-narrow { margin-bottom: 1rem; } @media only screen and (min-width: 769px) { .p-media-movie--bottom-narrow { margin-bottom: 1.25rem; } } /* .p-media-list --- */ .p-media-list { margin-bottom: 1.5rem; } .p-media-list__list { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; } @media only screen and (min-width: 769px) { .p-media-list__list { gap: 0.75rem; } } .p-media-list__list + .p-media-list__list { margin-top: 8px; } .p-media-list__item { flex-basis: calc((100% - (0.5rem * 5)) / 6); flex-grow: 1; flex-shrink: 0; max-width: calc((100% - (0.5rem * 5)) / 6); } @media only screen and (min-width: 769px) { .p-media-list__item { flex-basis: calc((100% - (0.75rem * 5)) / 6); max-width: calc((100% - (0.75rem * 5)) / 6); } } .p-media-list__img { display: block; margin: auto; width: 100%; } @media only screen and (max-width: 768px) { .p-media-list[data-col-narrow="1"] .p-media-list__item { flex-basis: calc((100% - (0.5rem * (1 - 1))) / 1); max-width: calc((100% - (0.5rem * (1 - 1))) / 1); } .p-media-list[data-col-narrow="2"] .p-media-list__item { flex-basis: calc((100% - (0.5rem * (2 - 1))) / 2); max-width: calc((100% - (0.5rem * (2 - 1))) / 2); } .p-media-list[data-col-narrow="3"] .p-media-list__item { flex-basis: calc((100% - (0.5rem * (3 - 1))) / 3); max-width: calc((100% - (0.5rem * (3 - 1))) / 3); } .p-media-list[data-col-narrow="4"] .p-media-list__item { flex-basis: calc((100% - (0.5rem * (4 - 1))) / 4); max-width: calc((100% - (0.5rem * (4 - 1))) / 4); } .p-media-list[data-col-narrow="5"] .p-media-list__item { flex-basis: calc((100% - (0.5rem * (5 - 1))) / 5); max-width: calc((100% - (0.5rem * (5 - 1))) / 5); } } @media only screen and (min-width: 769px) { .p-media-list[data-col-wide="1"] .p-media-list__item { flex-basis: calc((100% - (0.75rem * (1 - 1))) / 1); max-width: calc((100% - (0.75rem * (1 - 1))) / 1); } .p-media-list[data-col-wide="2"] .p-media-list__item { flex-basis: calc((100% - (0.75rem * (2 - 1))) / 2); max-width: calc((100% - (0.75rem * (2 - 1))) / 2); } .p-media-list[data-col-wide="3"] .p-media-list__item { flex-basis: calc((100% - (0.75rem * (3 - 1))) / 3); max-width: calc((100% - (0.75rem * (3 - 1))) / 3); } .p-media-list[data-col-wide="4"] .p-media-list__item { flex-basis: calc((100% - (0.75rem * (4 - 1))) / 4); max-width: calc((100% - (0.75rem * (4 - 1))) / 4); } .p-media-list[data-col-wide="5"] .p-media-list__item { flex-basis: calc((100% - (0.75rem * (5 - 1))) / 5); max-width: calc((100% - (0.75rem * (5 - 1))) / 5); } } @media only screen and (max-width: 768px) { .p-media-list[data-col-narrow=auto] .p-media-list__list { justify-content: center; } .p-media-list[data-col-narrow=auto] .p-media-list__item { flex-basis: auto; max-width: var(--width-max-content); flex-grow: initial; flex-shrink: 1; } } @media only screen and (min-width: 769px) { .p-media-list[data-col-wide=auto] .p-media-list__item { flex-basis: auto; max-width: var(--width-max-content); } } /* .p-media-wave-layout --- */ .p-media-wave-layout { margin-bottom: 2.5rem; } @media only screen and (min-width: 769px) { .p-media-wave-layout { margin-bottom: 5rem; } } .p-media-wave-layout__inner { display: flex; flex-direction: column-reverse; gap: 1.5rem; } @media only screen and (min-width: 769px) { .p-media-wave-layout__inner { align-items: center; flex-direction: row-reverse; gap: 2.25rem; } } .p-media-wave-layout__content { flex: 1 1 auto; width: 100%; } @media only screen and (min-width: 769px) { .p-media-wave-layout__content { padding: 5rem 0 1.875rem 0.75rem; } } .p-media-wave-layout__media { position: relative; flex: 0 0 auto; overflow: hidden; z-index: var(--zindex-default); } @media only screen and (max-width: 768px) { .p-media-wave-layout__media { margin-right: -1rem; margin-left: -1rem; } } @media only screen and (min-width: 769px) { .p-media-wave-layout__media { max-width: 50%; } } .p-media-wave-layout__media-wave { position: absolute; top: 0; left: 0; z-index: var(--zindex-behind); } .p-media-wave-layout__media-wave img { vertical-align: bottom; } .p-media-wave-layout__media-image img { vertical-align: bottom; } @media only screen and (min-width: 769px) { .p-media-wave-layout--row-reverse .p-media-wave-layout__inner { flex-direction: row; } } .p-media-wave-layout--row-reverse .p-media-wave-layout__media-wave { right: 0; left: unset; } .p-media-wave-layout[data-right=wide] .p-media-wave-layout__media-wave { padding-left: 15%; } .p-media-wave-layout[data-right=wide] .p-media-wave-layout__media-image { padding-right: 15%; } .p-media-wave-layout[data-right=narrow] .p-media-wave-layout__media-wave { padding-left: 4%; } .p-media-wave-layout[data-right=narrow] .p-media-wave-layout__media-image { padding-right: 4%; } .p-media-wave-layout[data-left=wide] .p-media-wave-layout__media-wave { padding-right: 15%; } .p-media-wave-layout[data-left=wide] .p-media-wave-layout__media-image { padding-left: 15%; } .p-media-wave-layout[data-left=narrow] .p-media-wave-layout__media-wave { padding-right: 4%; } .p-media-wave-layout[data-left=narrow] .p-media-wave-layout__media-image { padding-left: 4%; } .p-media-wave-layout[data-top=wide] .p-media-wave-layout__media-wave { padding-bottom: 15%; top: unset; bottom: 0; } .p-media-wave-layout[data-top=wide] .p-media-wave-layout__media-image { padding-top: 15%; } .p-media-wave-layout[data-top=narrow] .p-media-wave-layout__media-wave { padding-bottom: 4%; top: unset; bottom: 0; } .p-media-wave-layout[data-top=narrow] .p-media-wave-layout__media-image { padding-top: 4%; } .p-media-wave-layout[data-bottom=wide] .p-media-wave-layout__media-wave { padding-top: 15%; } .p-media-wave-layout[data-bottom=wide] .p-media-wave-layout__media-image { padding-bottom: 15%; } .p-media-wave-layout[data-bottom=narrow] .p-media-wave-layout__media-wave { padding-top: 4%; } .p-media-wave-layout[data-bottom=narrow] .p-media-wave-layout__media-image { padding-bottom: 4%; } .p-media-wave-layout[data-center=true] .p-media-wave-layout__media-image { padding-top: 4%; padding-bottom: 4%; } /* .p-media-link-list --- */ .p-media-link-list { margin-bottom: 1.5rem; } .p-media-link-list__list { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; } @media only screen and (min-width: 769px) { .p-media-link-list__list { gap: 0.75rem; } } .p-media-link-list__list + .p-media-link-list__list { margin-top: 8px; } .p-media-link-list__item { flex-grow: 1; max-width: 71px; height: 53px; } @media only screen and (min-width: 769px) { .p-media-link-list__item { max-width: 108px; height: 80px; } } .p-media-link-list__link { display: flex; flex-grow: 1; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 4px; border-style: solid; border-image: linear-gradient(0deg, transparent 0%, #ccc 0%) 1/1px; background-color: var(--color-white); } .p-media-link-list__link.is-current { border-image: linear-gradient(0deg, transparent 0%, var(--color-main) 0%) 1/2px; } .p-media-link-list__link:hover, .p-media-link-list__link:active, .p-media-link-list__link:focus-visible { opacity: var(--opacity-images); } .p-media-link-list__img { display: block; height: auto; width: auto; } img.p-media-link-list__img { max-height: 100%; } /* List * ---------------------------- */ /* .p-list --- */ .p-list { margin-bottom: 1rem; } @media only screen and (min-width: 769px) { .p-list { margin-bottom: 1.5rem; } } /* .p-list-question --- */ .p-list-question { margin-bottom: 2rem; } @media only screen and (min-width: 769px) { .p-list-question { margin-bottom: 3rem; } } /* .p-list-description --- */ .p-list-description { margin-top: 0.75rem; margin-bottom: 0.75rem; } /* .p-list-more --- */ .p-list-more { position: relative; margin-bottom: 0.75rem; padding-bottom: 1.25rem; } .p-list-more__btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-list-more__btn { position: absolute; bottom: 0; display: block; width: 100%; min-height: 3.75rem; margin-top: 1rem; background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 70%); } .p-list-more__btn::before { position: absolute; content: ""; display: block; right: 0; bottom: 1.25rem; left: 0; margin: 0 auto; width: 8px; height: 8px; border-top: 2px solid var(--color-main); border-right: 2px solid var(--color-main); transform: rotate(135deg); } html:not([data-script-enabled=true]) .p-list-more__btn { display: none; } .p-list-more__btn[aria-expanded=true] { position: relative; inset: auto; min-height: 28px; margin-top: 0; background-image: none; } .p-list-more__btn[aria-expanded=true]::before { bottom: 0; transform: rotate(-45deg); } .p-list-more__body { margin-bottom: 0; transition: height var(--transition-duration); overflow: hidden; } /* .p-dealer-map --- */ .p-dealer-map { margin-top: 2rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 769px) { .p-dealer-map { margin-top: 3rem; } } html[data-script-enabled=true] .js-list-more__item.is-hidden { display: none; } /* slider --- */ /* .p-products-slider-galleries */ html[data-script-enabled=true] .p-products-slider-galleries .p-products-slider-gallery:where(:not(:first-of-type)) { display: none; } /* .p-products-slider-gallery */ @media only screen and (min-width: 769px) { .p-products-slider-gallery { max-width: 580px; margin: 0 auto; } } .p-products-slider-gallery__image-body { position: relative; display: flex; justify-content: center; align-items: center; height: 258px; } @media only screen and (min-width: 769px) { .p-products-slider-gallery__image-body { height: 437px; } } .p-products-slider-gallery__image-body > img { width: auto; max-height: 100%; } .p-products-slider-gallery__image-body::before { position: absolute; content: ""; display: block; bottom: 8px; left: 8px; width: 30px; height: 30px; border-radius: 5px; background-repeat: no-repeat; background-image: url("/assets/common/images/icon/icon-zoom-01.svg"); background-size: 18px 19px; background-position: center; background-color: rgba(255, 255, 255, 0.8); } .p-products-slider-gallery__image-main { display: flex; align-items: center; justify-content: center; width: 100%; } .p-products-slider-gallery__image-caption { margin-top: 0.75rem; min-height: 3em; } .p-products-slider-gallery__item { display: flex; flex-direction: column-reverse; align-items: center; } /* .p-products-slider-gallery-thumbnail */ .p-products-slider-gallery-thumbnail { position: relative; padding: 0 1.25rem; margin: 1.5rem 0 0; overflow: hidden; visibility: visible; } @media only screen and (min-width: 769px) { .p-products-slider-gallery-thumbnail { padding: 0 2.9375rem; } } .p-products-slider-gallery-thumbnail__image { width: auto; max-height: 100%; } .p-products-slider-gallery-thumbnail__item { cursor: pointer; display: flex; align-items: center; justify-content: center; width: calc((100% + 0.75rem) / 4 - 0.75rem); height: 3.3125rem; margin-right: 0.75rem; padding: 1px; border-style: solid; border-image: linear-gradient(0deg, transparent 0%, #ccc 0%) 1/1px; } @media only screen and (min-width: 769px) { .p-products-slider-gallery-thumbnail__item { height: 5rem; } } .p-products-slider-gallery-thumbnail__item:hover, .p-products-slider-gallery-thumbnail__item:active, .p-products-slider-gallery-thumbnail__item:focus-visible { opacity: var(--opacity-images); } .p-products-slider-gallery-thumbnail__item.is-active { border-image: linear-gradient(0deg, transparent 0%, var(--color-main) 0%) 1/2px; } .p-products-slider-gallery-thumbnail__arrow { left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .p-products-slider-gallery-thumbnail__arrow-item { position: absolute; top: 50%; transform: translateY(-50%); } .p-products-slider-gallery-thumbnail__arrow-item--preview { left: 0; } .p-products-slider-gallery-thumbnail__arrow-item--next { right: 0; } .p-products-slider-gallery-thumbnail__arrow-button { display: block; } .p-products-slider-gallery-thumbnail__arrow-image { display: block; height: auto; margin: auto; max-width: 100%; pointer-events: none; } .p-products-gallery-dialog { min-height: calc(100vh - 6.25rem); min-height: calc(100dvh - 5rem); height: auto; } .p-products-gallery-dialog .p-dialog__inner { display: flex; flex-direction: column; height: 100%; } @media only screen and (min-width: 769px) { .p-products-gallery-dialog .p-dialog__inner { flex-direction: row; } } .p-products-gallery-dialog .p-dialog__inner .p-panzoom-image.is-hidden, .p-products-gallery-dialog .p-dialog__inner .p-panzoom-movie.is-hidden { display: none; } .p-products-gallery-dialog .p-dialog__inner .p-panzoom-image { display: grid; justify-content: center; align-items: center; height: 100%; overflow: hidden; border: 1px solid var(--color-line); } .p-products-gallery-dialog .p-dialog__inner .p-panzoom-image-container { flex: 1 1 auto; display: grid; align-items: center; height: calc(95% - 1.5625rem - 3.3125rem); margin-bottom: 1.5625rem; } @media only screen and (min-width: 769px) { .p-products-gallery-dialog .p-dialog__inner .p-panzoom-image-container { height: auto; margin-bottom: 0; margin-right: 1.5rem; } } .p-products-gallery-dialog .p-dialog__inner .p-panzoom-image__parent { border: 0; } .p-products-gallery-dialog .p-dialog__inner .p-panzoom-movie { position: relative; width: 100%; padding-top: 56.25%; } .p-products-gallery-dialog .p-dialog__inner .p-panzoom-movie__frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail { overflow-x: scroll; } @media only screen and (min-width: 769px) { .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail { overflow-x: auto; flex: 0 0 auto; } } .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__body { display: flex; gap: 0.75rem; } @media only screen and (min-width: 769px) { .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } } .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__item { position: relative; display: flex; align-items: center; justify-content: center; height: 3.3125rem; width: 4.4375rem; padding: 1px; border-style: solid; border-image: linear-gradient(0deg, transparent 0%, #ccc 0%) 1/1px; cursor: pointer; } @media only screen and (min-width: 769px) { .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__item { width: 6.75rem; height: 5rem; min-width: auto; } } .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__item:hover, .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__item:active, .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__item:focus-visible { opacity: var(--opacity-images); } .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__item.is-active { border-image: linear-gradient(0deg, transparent 0%, var(--color-main) 0%) 1/2px; } .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__item::before { content: ""; display: block; height: 3.3125rem; width: 4.4375rem; } @media only screen and (min-width: 769px) { .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__item::before { width: 6.75rem; height: 5rem; } } .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 3.4375rem; max-height: 2.3125rem; } @media only screen and (min-width: 769px) { .p-products-gallery-dialog .p-dialog__inner .p-products-gallery-dialog-thumbnail__image { max-width: 5.25rem; max-height: 3.5rem; } } /* note * ---------------------------- */ /* .p-note --- */ .p-note { margin-bottom: 24px; } /* link * ---------------------------- */ /* .p-link-list --- */ .p-link-list { margin-bottom: 2.5rem; } .p-link-list__item { margin-top: 0.75rem; } .p-link-list__item:first-of-type { margin-top: 0; } .p-link-list--notice .p-link-list__item { display: flex; align-items: flex-start; } .p-link-list--notice .p-link-list__item::before { content: url("/assets/common/images/icon/icon-alert.svg"); display: block; padding-right: 0.5rem; position: relative; top: 0.1em; } .p-link-list--row .p-link-list__list { display: flex; flex-wrap: wrap; gap: 0.75rem 4rem; } .p-link-list--row .p-link-list__item { margin-top: 0; } @media only screen and (min-width: 769px) { .p-link-list--pc-row .p-link-list__list { display: flex; flex-wrap: wrap; gap: 0.75rem 4rem; } .p-link-list--pc-row .p-link-list__item { margin-top: 0; } } /* .p-link-anchor --- */ .p-link-anchor { border-bottom: 1px solid var(--color-line); padding-bottom: 1.5rem; margin-bottom: 2.5rem; max-width: var(--width-max-content); background-color: var(--color-bg-default); } @media only screen and (min-width: 769px) { .p-link-anchor { padding: 0.75rem 0; padding-bottom: 0.75rem; margin-left: auto; margin-right: auto; } } .l-inner > .p-link-anchor { margin-top: 3rem; } @media only screen and (min-width: 769px) { .l-inner > .p-link-anchor { margin-top: 4rem; } } .p-link-anchor__list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem 2.5rem; background-color: var(--color-bg-default); } @media only screen and (min-width: 769px) { .p-link-anchor__list { justify-content: center; gap: 0.75rem 4rem; } } /* .p-link-store --- */ .p-link-store { margin-bottom: 1rem; } .p-link-store__list { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .p-link-store__item--app { flex: 0 0 144px; } .p-link-store__item--google { flex: 0 0 162px; } /* .p-link-sns --- */ .p-link-sns__list { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 1rem; } /* .p-link-banner --- */ .p-link-banner { text-align: center; } .p-link-banner__link { display: inline-block; } .p-link-banner__link .p-link-banner__img { vertical-align: bottom; } .p-link-banner__link:hover .p-link-banner__img, .p-link-banner__link:active .p-link-banner__img, .p-link-banner__link:focus-visible .p-link-banner__img { opacity: var(--opacity-images); } /* .p-link-list-02 --- */ .p-link-list-02 { margin-bottom: 2rem; } @media only screen and (min-width: 769px) { .p-link-list-02 { margin-top: 5rem; margin-bottom: 3rem; } } .p-link-list-02__list { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 0.75rem; } @media only screen and (min-width: 769px) { .p-link-list-02__list { flex-direction: row; border-top: 1px solid var(--color-line); } } .p-link-list-02__item { width: 100%; border-top: 1px solid var(--color-line); text-align: center; margin: 0; } @media only screen and (min-width: 769px) { .p-link-list-02__item { width: auto; border-top: none; border-right: 1px solid var(--color-line); } } .p-link-list-02__item .p-link-list-02__text { display: block; color: var(--color-text-gray); padding: 0.75rem; } @media only screen and (min-width: 769px) { .p-link-list-02__item .p-link-list-02__text { padding: 0 2rem; } } .p-link-list-02__item .c-link { display: block; padding: 0.75rem; } @media only screen and (min-width: 769px) { .p-link-list-02__item .c-link { padding: 0 2rem; } } .p-link-list-02__item:last-child { border-bottom: 1px solid var(--color-line); } @media only screen and (min-width: 769px) { .p-link-list-02__item:last-child { border: none; } } /* .p-link-hdg */ .p-link-hdg { margin-bottom: 2.5rem; } .p-link-hdg__hdg { font-size: 1.25rem; margin-bottom: 16px; } /* .p-link-hdg-02 */ .p-link-hdg-02__hdg { font-weight: bold; margin-bottom: 0.5rem; } /* .p-link-list --- */ .p-link-list-03 { margin-bottom: 0.75rem; } /* Table * ---------------------------- */ /* .p-table --- */ .p-table { margin-bottom: 32px; } @media only screen and (min-width: 769px) { .p-table { margin-bottom: 48px; } } .p-table__description { margin-top: 0.625rem; } /* .p-table-comparison --- */ .p-table-comparison { margin-bottom: 32px; } @media only screen and (min-width: 769px) { .p-table-comparison { margin-bottom: 48px; } } .p-table-comparison th { min-width: auto; } @media only screen and (min-width: 769px) { .p-table-comparison th { word-break: keep-all; } } .p-table-comparison thead th { padding: 12px; text-align: center; vertical-align: top; background-color: transparent; box-sizing: border-box; } .p-table-comparison thead th.p-table-comparison__current { background-color: var(--color-table-current); } @media only screen and (min-width: 769px) { .p-table-comparison thead th { padding: 16px; } } .p-table-comparison tbody td { min-width: 142px; } @media only screen and (min-width: 769px) { .p-table-comparison tbody td { min-width: 240px; } } .p-table-comparison__current { background-color: var(--color-table-current); } .p-table-comparison__anchor, .p-table-comparison__inner { display: flex; flex-direction: column-reverse; gap: 0.75rem; font-weight: bold; } @media only screen and (min-width: 769px) { .p-table-comparison__anchor, .p-table-comparison__inner { gap: 1rem; } } .p-table-comparison__img { width: 73px; margin: 0 auto; } @media only screen and (min-width: 769px) { .p-table-comparison__img { width: auto; min-width: 100px; } } .p-table-comparison__anchor:hover:hover, .p-table-comparison__anchor:hover:active, .p-table-comparison__anchor:hover:focus-visible, .p-table-comparison__anchor:active:hover, .p-table-comparison__anchor:active:active, .p-table-comparison__anchor:active:focus-visible, .p-table-comparison__anchor:focus-visible:hover, .p-table-comparison__anchor:focus-visible:active, .p-table-comparison__anchor:focus-visible:focus-visible { text-decoration: underline; color: var(--color-main); } .p-table-comparison__name { display: block; word-break: break-all; } .p-table-comparison__name::after { content: ""; display: inline-block; width: 7px; height: 13px; vertical-align: middle; background-image: url("/assets/common/images/icon/icon-arrow-right-violet-01.svg"); background-size: contain; background-repeat: no-repeat; margin-left: 12px; } .p-table-comparison__current .p-table-comparison__name::after { content: none; } .p-table-comparison__description { margin-top: 0.625rem; } /* .p-table-spec --- */ .p-table-spec .c-table { border-left: none; min-width: auto; } .p-table-spec th:first-child, .p-table-spec td:first-child { border-left-style: solid; border-left-color: var(--color-line); } .p-table-spec thead th, .p-table-spec thead td { background-color: var(--color-white); } @media only screen and (min-width: 769px) { .p-table-spec thead th, .p-table-spec thead td { padding: 1rem 2rem; } } .p-table-spec__inner { overflow-x: auto; } .p-table-spec__fixed-area { display: flex; align-items: center; justify-content: center; flex-direction: column-reverse; gap: 0.25rem; } @media only screen and (min-width: 769px) { .p-table-spec__fixed-area { gap: 1rem; } } .p-table-spec__delete-btn { position: relative; width: 20px; height: 20px; align-self: flex-end; } @media only screen and (min-width: 769px) { .p-table-spec__delete-btn { right: -16px; } } .p-table-spec__delete-btn::before, .p-table-spec__delete-btn::after { position: absolute; content: ""; display: block; top: 50%; left: 50%; width: 100%; height: 3px; background-color: var(--color-main); } .p-table-spec__delete-btn::before { transform: translate(-50%, -50%) rotate(45deg); } .p-table-spec__delete-btn::after { transform: translate(-50%, -50%) rotate(-45deg); } .p-table-spec__delete-btn__alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-table-spec.is-sticky { --thead-td-width: 0; --thead-height: 0; --table-width: 0; --th-translate-x: 0; padding-top: var(--thead-height); } .p-table-spec.is-sticky thead { position: fixed; top: var(--js-header-height); z-index: calc(var(--zindex-layer1) - 1); width: var(--table-width); overflow: hidden; } .p-table-spec.is-sticky thead td:first-child, .p-table-spec.is-sticky thead th:first-child { min-width: var(--thead-td-width); z-index: calc(var(--zindex-layer1) - 1); } /* .p-table-spec.is-sticky thead th:last-child { border-right-width: 0px; } */ /* .p-table-spec.is-sticky thead th:not(:first-child) { transform: translateX(var(--th-translate-x)); } */ .p-table-spec.is-sticky thead th { transform: translateX(var(--th-translate-x)); } .p-table-spec.is-sticky .p-table-comparison__img { display: none; } @media only screen and (min-width: 769px) { .p-table-spec.is-sticky thead :is(th, td) { padding: 0.5rem 2rem; } .p-table-spec.is-sticky .p-table-spec__fixed-area { gap: 0rem; } } .p-table-spec td.is-sticky, .p-table-spec th.is-sticky, .spec-table th[class*="sticky"], .spec-table td[class*="sticky"] { /*position: sticky;*/ position: initial; z-index: calc(var(--zindex-layer1) - 3); } .p-table-spec td.is-sticky.fn-upper-layer, .p-table-spec th.is-sticky.fn-upper-layer { z-index: calc(var(--zindex-layer1) - 2); } .p-table-spec.is-scroll-end { position: relative; } .p-table-spec.is-scroll-end thead { position: absolute; top: auto; /*bottom: 0;*/ } .p-table-spec .c-table__em, .spec-table .c-table__em { font-size: var(--font-size-default) !important; font-weight: normal !important; background-color: var(--color-bg-table-th) !important; border-bottom: 1px solid #ccc !important; } .js-table-spec-row button { font-size: 0; vertical-align: middle; } .js-table-spec-thead tr th:first-child { /*border-right: none;*/ } .js-table-spec-thead tr th:nth-child(2) { border-left: 1px solid #ccc; } .p-table-spec, .spec-table { hyphens: auto; } @media only screen and (max-width: 768px) { .p-table-spec__inner, .p-table-spec__inner .c-table__em em, .spec-table .c-table-scroll__inner, .spec-table .c-table-scroll__inner .c-table__em { font-size: 12px !important; } .p-table-spec__inner .js-table-spec-row th, .spec-table .c-table-scroll__inner th, .spec-table .c-table-scroll__inner .u-w-20 { width: 80px !important; min-width: 80px; } .spec-table .c-table-scroll__horizontal-sticky{ position: initial; } } .scroltable-wrapper { position: relative } .scroltable-container { overflow-x: auto; } .scroltable-nav { display: none; position: absolute; width: 60px; height: 90px; cursor: pointer; border: double 5px rgba(255,255,255); border-radius: 10px; } .scroltable-nav.scroltable-nav-left { left: 0; width: 46px; background-color: rgba(64,64,66,.8); top: var(--top-position, 0); bottom: var(--bottom-position, 0); left: var(--left-position, 0); -webkit-tap-highlight-color: rgba(0,0,0,0); } .scroltable-nav.scroltable-nav-left:hover { background-color: rgba(64,64,66,.9); } .scroltable-nav.scroltable-nav-left::after { content: ""; display: inline-block; width: 50%; height: inherit; vertical-align: middle; background-image: url(/assets/common/images/icon/icon-arrow-up-white-01.svg); background-size: contain; background-repeat: no-repeat; transform: rotate(270deg); margin-left: 48px; margin-top: -5px; } .scroltable-nav.scroltable-nav-right { right: 0; width: 46px; background-color: rgba(64,64,66,.8); top: var(--top-position, 0); bottom: var(--bottom-position, 0); right: var(--right-position, 0); -webkit-tap-highlight-color: rgba(0,0,0,0); } .scroltable-nav.scroltable-nav-right:hover { background-color: rgba(64,64,66,.9); } .scroltable-nav.scroltable-nav-right::after { content: ""; display: inline-block; width: 50%; height: inherit; vertical-align: middle; background-image: url(/assets/common/images/icon/icon-arrow-up-white-01.svg); background-size: contain; background-repeat: no-repeat; transform: rotate(90deg); margin-left: -29px; margin-top: -5px; } .js-vertical-sticky-parent { -ms-overflow-style: none; } .js-vertical-sticky-parent::-webkit-scrollbar { display: none; } /* box * ---------------------------- */ /* .p-box */ .p-box { background-color: var(--color-table-current); margin-bottom: 3.75rem; padding: 1.25rem; } @media only screen and (min-width: 769px) { .p-box { margin-bottom: 4rem; padding: 1.5rem; } } /* .p-box-02 */ .p-box-02 { background-color: var(--color-bg-box); margin-bottom: 4.5rem; padding: 1.25rem; } @media only screen and (min-width: 769px) { .p-box-02 { margin-bottom: 5.5rem; padding: 1.5rem; } } .p-box-02__head { margin-bottom: 1rem; } .p-box-02__content + .p-box-02__content { margin-top: 2rem; } .p-box-02__content .p-text { margin-bottom: 0.5rem; } .p-box-02__hr { display: block; background-color: var(--color-white); width: 100%; height: 1px; margin: 1.5rem 0; } /* .p-box-scroll --- */ .p-box-scroll { background-color: var(--color-white); border: 1px solid #ccc; height: 18.75rem; margin-bottom: 2rem; overflow-y: scroll; padding: 0.75rem 0.75rem 1.5rem; } .p-box-scroll:focus-visible { outline: -webkit-focus-ring-color inset 2px; outline-offset: -2px; } @media only screen and (min-width: 769px) { .p-box-scroll { margin-bottom: 48px; } } /* .p-box-related-info --- */ .p-box-related-info { border-bottom: 1px solid var(--color-line); margin-bottom: 2rem; padding-bottom: 2rem; } .p-box-related-info > *:first-child { margin-top: 0; } .p-box-related-info > *:last-child { margin-bottom: 0; } @media only screen and (min-width: 769px) { .p-box-related-info__hdg { margin-bottom: 1.5rem; } } .p-box-related-info__text { margin-bottom: 2rem; } @media only screen and (min-width: 769px) { .p-box-related-info__text { margin-bottom: 3rem; } } /* .p-box-alert */ .p-box-alert { background-color: var(--color-bg-box); padding: 1rem; } .p-box-alert__inner { display: flex; flex-direction: column; } @media only screen and (min-width: 769px) { .p-box-alert__inner { max-width: 1200px; width: 100%; align-items: flex-start; justify-content: center; margin: auto; } } /* .p-box-toggle --- */ .p-box-toggle { display: grid; gap: 0.5rem; } @media only screen and (min-width: 769px) { .p-box-toggle { gap: 0.75rem; } } .p-box-toggle__btn { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; } .p-box-toggle__btn:hover { color: var(--color-main); text-decoration: underline; } .p-box-toggle__btn[aria-expanded=true] .p-box-toggle__icon-open { display: none; } .p-box-toggle__btn[aria-expanded=false] .p-box-toggle__icon-close { display: none; } .p-box-toggle__icon-open, .p-box-toggle__icon-close { min-width: 28px; width: 28px; height: 28px; } @media only screen and (min-width: 769px) { .p-box-toggle__icon-open, .p-box-toggle__icon-close { min-width: 32px; width: 32px; height: 32px; } } .p-box-toggle__item { background-color: var(--color-bg-box); padding: 0.75rem; } @media only screen and (min-width: 769px) { .p-box-toggle__item { padding: 0.75rem 1.5rem; } } .p-box-toggle__btn-title { font-weight: bold; display: block; } .p-box-toggle__content-wrap { overflow: hidden; transition: height var(--transition-duration); } .p-box-toggle__content { padding-top: 1.5rem; } .p-box-toggle__content > :last-child { margin-bottom: 0; } /* panel * ---------------------------- */ /* .p-panel */ .p-panel { margin-bottom: 4rem; } @media only screen and (min-width: 769px) { .p-panel { margin-bottom: 5rem; } } .p-panel__inner { display: flex; flex-wrap: wrap; gap: 0.625rem; } @media only screen and (min-width: 769px) { .p-panel__inner { gap: 1.5rem; } } .p-panel__content { flex-basis: calc((100% - 0.625rem) / 2); flex-shrink: 0; max-width: calc((100% - 0.625rem) / 2); } @media only screen and (min-width: 769px) { .p-panel__content { flex-basis: calc((100% - 4.5rem) / 4); max-width: calc((100% - 4.5rem) / 4); } } /* .p-panel-introduction */ .p-panel-introduction__wrap { display: flex; flex-direction: column-reverse; gap: 0.5rem 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-introduction__wrap { gap: 0.75rem 1.5rem; } .p-panel-introduction__wrap:where([href]):hover .p-panel-introduction__media-item, .p-panel-introduction__wrap:where([href]):active .p-panel-introduction__media-item, .p-panel-introduction__wrap:where([href]):focus-visible .p-panel-introduction__media-item { opacity: var(--opacity-images); } .p-panel-introduction__wrap:where([href]):hover .p-panel-introduction__link-item, .p-panel-introduction__wrap:where([href]):active .p-panel-introduction__link-item, .p-panel-introduction__wrap:where([href]):focus-visible .p-panel-introduction__link-item { color: var(--color-main); text-decoration: underline; } } .p-panel-introduction__media { align-items: center; display: inline-flex; flex: 0 0 auto; flex-direction: column; justify-content: center; line-height: 1; max-width: 100%; } .p-panel-introduction__media-item { display: block; flex: 1 1 auto; margin: auto; max-width: 100%; width: 100%; } .p-panel-introduction__content { flex: 1 1 auto; } .p-panel-introduction__content-head { display: flex; flex-direction: column-reverse; } .p-panel-introduction__title { margin-bottom: 0.25rem; } h3.p-panel-introduction__title { font-size: 1.5rem; overflow-wrap: anywhere; } h4.p-panel-introduction__title { font-size: 1.25rem; overflow-wrap: anywhere; } @media only screen and (min-width: 769px) { .p-panel-introduction__title { font-size: 1.125rem; } h3.p-panel-introduction__title { font-size: 1.875rem; } h4.p-panel-introduction__title { font-size: 1.5rem; } } .p-panel-introduction__title-sub::before { content: ''; display: inline-block; margin-right: 0.5rem; } .p-panel-introduction__title-sub { font-size: 0.95rem; color: var(--color-font-sub); } .p-panel-introduction__name { margin-bottom: 0.25rem; } .p-panel-introduction__category { margin-bottom: 0.5rem; } .p-panel-introduction__text { margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-introduction__link-item:where([href]):hover, .p-panel-introduction__link-item:where([href]):active, .p-panel-introduction__link-item:where([href]):focus-visible { text-decoration: underline; color: var(--color-main); } } .p-panel-introduction__link-item--arrow::after { content: url("/assets/common/images/icon/icon-arrow-right-violet-01.svg"); display: inline-block; padding-left: 0.75rem; } .p-panel-introduction--align-center .p-panel-introduction__content { text-align: center; } .p-panel-introduction--row .p-panel-introduction__wrap { align-items: flex-start; display: flex; flex-direction: row-reverse; } .p-panel-introduction--row .p-panel-introduction__media { max-width: 50%; } .p-panel-introduction--row .p-panel-introduction__media-item { height: auto; } /* .p-panel-introduction-02 */ .p-panel-introduction-02__wrap { align-items: flex-start; display: flex; flex-direction: row-reverse; gap: 0.5rem 0.75rem; position: relative; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__wrap { gap: 0.75rem 1.5rem; } .p-panel-introduction-02__wrap:where([href]):hover .p-panel-introduction-02__media-item, .p-panel-introduction-02__wrap:where([href]):active .p-panel-introduction-02__media-item, .p-panel-introduction-02__wrap:where([href]):focus-visible .p-panel-introduction-02__media-item { opacity: var(--opacity-images); } .p-panel-introduction-02__wrap:where([href]):hover .p-panel-introduction-02__link-item, .p-panel-introduction-02__wrap:where([href]):active .p-panel-introduction-02__link-item, .p-panel-introduction-02__wrap:where([href]):focus-visible .p-panel-introduction-02__link-item { color: var(--color-main); text-decoration: underline; } } .p-panel-introduction-02__media { align-items: center; display: inline-flex; flex: 0 0 auto; gap: 0.5rem 0.75rem; flex-direction: column-reverse; justify-content: center; max-width: 50%; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__media { gap: 0.75rem 1.5rem; } .p-panel-introduction-02__media:where([href]):hover .p-panel-introduction-02__media-item, .p-panel-introduction-02__media:where([href]):active .p-panel-introduction-02__media-item, .p-panel-introduction-02__media:where([href]):focus-visible .p-panel-introduction-02__media-item { opacity: var(--opacity-images); } .p-panel-introduction-02__media:where([href]):hover .p-panel-introduction-02__title-main, .p-panel-introduction-02__media:where([href]):active .p-panel-introduction-02__title-main, .p-panel-introduction-02__media:where([href]):focus-visible .p-panel-introduction-02__title-main { color: var(--color-main); text-decoration: underline; } } .p-panel-introduction-02__media-head { display: flex; flex-direction: column-reverse; width: 100%; } .p-panel-introduction-02__media-item { display: block; flex: 1 1 auto; height: auto; margin: auto; width: 100%; } .p-panel-introduction-02__content { flex: 1 1 auto; } .p-panel-introduction-02__content-head { display: flex; flex-direction: column-reverse; } .p-panel-introduction-02__label:not(:empty) { margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__label:not(:empty) { margin-bottom: 0.25rem; } } .p-panel-introduction-02__label-list { display: flex; flex-wrap: wrap; gap: 0.25rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__label-list { gap: 0.5rem; } } .p-panel-introduction-02__label-item { flex: 0 0 auto; } .p-panel-introduction-02__title { margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__title { margin-bottom: 0.25rem; } } .p-panel-introduction-02__title-main { font-size: 1.5rem; } .p-panel-introduction-02__title-sub::before { content: ''; display: inline-block; margin-right: 0.5rem; } .p-panel-introduction-02__title-sub { font-size: 1.125rem; } .p-panel-introduction-02__category { margin-bottom: 0.25rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__category { margin-bottom: 0.5rem; } } .p-panel-introduction-02__price { font-weight: bold; margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__price { margin-bottom: 0.25rem; } } .p-panel-introduction-02__duration { margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__duration { margin-bottom: 0.75rem; } } .p-panel-introduction-02__textarea { margin-bottom: 1rem; position: relative; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__textarea { margin-bottom: 1.5rem; } } .p-panel-introduction-02__more-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-panel-introduction-02__more-button { background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%); bottom: 0; display: block; margin-top: 16px; min-height: 40px; position: absolute; width: 100%; } .p-panel-introduction-02__more-button::before { position: absolute; content: ""; display: block; border-right: 2px solid var(--color-main); border-top: 2px solid var(--color-main); bottom: 0; height: 8px; left: 50%; transform: translateX(-50%) rotate(135deg); width: 8px; } html:not([data-script-enabled=true]) .p-panel-introduction-02__more-button { display: none; } .p-panel-introduction-02__more-button[aria-expanded=true] { background-image: none; inset: auto; margin-top: 0; min-height: 28px; position: relative; } .p-panel-introduction-02__more-button[aria-expanded=true]::before { transform: rotate(-45deg); } .p-panel-introduction-02__select-head { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; } .p-panel-introduction-02__select-title { flex: 0 0 auto; font-weight: bold; } .p-panel-introduction-02__select-list { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 0.5rem; } .p-panel-introduction-02__select-item { flex: 0 0 auto; } .p-panel-introduction-02__select-label { position: relative; } .p-panel-introduction-02__select-radio { position: absolute; } .p-panel-introduction-02__select-radio:checked + .p-panel-introduction-02__select-radio-text { font-weight: bold; } .p-panel-introduction-02__select-radio:focus-visible + .p-panel-introduction-02__select-radio-text { outline: -webkit-focus-ring-color inset 0.125rem; outline-offset: -0.125rem; } .p-panel-introduction-02__select-media-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .p-panel-introduction-02__select-media-item { flex: 0 0 auto; } .p-panel-introduction-02__select-button { border: 1px solid var(--color-line); display: block; height: auto; line-height: 1; padding: 0.5rem; } .p-panel-introduction-02__select-button[aria-pressed=true] { border-color: var(--color-main); } @media only screen and (min-width: 769px) { .p-panel-introduction-02__select-button:hover, .p-panel-introduction-02__select-button:active, .p-panel-introduction-02__select-button:focus-visible { opacity: 0.7; } } .p-panel-introduction-02__select-image { height: auto; margin: auto; max-width: 3.375rem; pointer-events: none; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__select-image { max-width: 5.25rem; } } .p-panel-introduction-02__link { text-align: right; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__link-item:where([href]):hover .p-panel-introduction-02__title-main, .p-panel-introduction-02__link-item:where([href]):active .p-panel-introduction-02__title-main, .p-panel-introduction-02__link-item:where([href]):focus-visible .p-panel-introduction-02__title-main { color: var(--color-main); text-decoration: underline; } } .p-panel-introduction-02__link-item--arrow::after { content: url("/assets/common/images/icon/icon-arrow-right-violet-01.svg"); display: inline-block; padding-left: 0.75rem; } .p-panel-introduction-02--column .p-panel-introduction-02__wrap { flex-direction: column; gap: 0; } .p-panel-introduction-02--column .p-panel-introduction-02__media { margin: auto; max-width: 100%; width: 100%; } .p-panel-introduction-02__color-variable-wrap { display: flex; align-items: center; } .p-panel-introduction-02__color-variable-image { margin-right: 12px; flex-shrink: 0; width: 22px; height: 22px; } .p-panel-introduction-02__color-variable-text { font-size: 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-02__color-variable-text { font-size: 0.875rem; } } /* .p-panel-introduction-03 */ .p-panel-introduction-03--text-more .p-panel-introduction-03__wrap { flex-direction: column; gap: 0; } .p-panel-introduction-03--text-more .p-panel-introduction-03__media { gap: 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-03--text-more .p-panel-introduction-03__media { gap: 1rem; } } .p-panel-introduction-03__wrap { align-items: flex-start; display: flex; flex-direction: column-reverse; gap: 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-03__wrap { gap: 1rem; } .p-panel-introduction-03__wrap:where([href]):hover .p-panel-introduction-03__media-item, .p-panel-introduction-03__wrap:where([href]):active .p-panel-introduction-03__media-item, .p-panel-introduction-03__wrap:where([href]):focus-visible .p-panel-introduction-03__media-item { opacity: var(--opacity-images); } .p-panel-introduction-03__wrap:where([href]):hover .p-panel-introduction-03__title, .p-panel-introduction-03__wrap:where([href]):hover .p-panel-introduction-03__text, .p-panel-introduction-03__wrap:where([href]):active .p-panel-introduction-03__title, .p-panel-introduction-03__wrap:where([href]):active .p-panel-introduction-03__text, .p-panel-introduction-03__wrap:where([href]):focus-visible .p-panel-introduction-03__title, .p-panel-introduction-03__wrap:where([href]):focus-visible .p-panel-introduction-03__text { color: var(--color-main); text-decoration: underline; } } .p-panel-introduction-03__media { display: inline-flex; flex: 0 0 auto; flex-direction: column-reverse; justify-content: center; margin: auto; max-width: 100%; width: 100%; } @media only screen and (min-width: 769px) { .p-panel-introduction-03__media:where([href]):hover .p-panel-introduction-03__media-item, .p-panel-introduction-03__media:where([href]):active .p-panel-introduction-03__media-item, .p-panel-introduction-03__media:where([href]):focus-visible .p-panel-introduction-03__media-item { opacity: var(--opacity-images); } .p-panel-introduction-03__media:where([href]):hover .p-panel-introduction-03__title, .p-panel-introduction-03__media:where([href]):hover .p-panel-introduction-03__text, .p-panel-introduction-03__media:where([href]):active .p-panel-introduction-03__title, .p-panel-introduction-03__media:where([href]):active .p-panel-introduction-03__text, .p-panel-introduction-03__media:where([href]):focus-visible .p-panel-introduction-03__title, .p-panel-introduction-03__media:where([href]):focus-visible .p-panel-introduction-03__text { color: var(--color-main); text-decoration: underline; } } .p-panel-introduction-03__media-item { display: block; flex: 1 1 auto; height: auto; margin: auto; width: 100%; } .p-panel-introduction-03__content { flex: 1 1 auto; } .p-panel-introduction-03__title { font-size: 1.5rem; margin-bottom: 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-introduction-03__title { font-size: 1.875rem; } } @media only screen and (min-width: 769px) { .p-panel-introduction-03__link-item:where([href]):hover, .p-panel-introduction-03__link-item:where([href]):active, .p-panel-introduction-03__link-item:where([href]):focus-visible { text-decoration: underline; color: var(--color-main); } } .p-panel-introduction-03__textarea { position: relative; } .p-panel-introduction-03__text + .p-panel-introduction-03__text { margin-top: 0.5rem; } .p-panel-introduction-03__more-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-panel-introduction-03__more-button { background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%); bottom: 0; display: block; margin-top: 16px; min-height: 40px; position: absolute; width: 100%; } .p-panel-introduction-03__more-button::before { position: absolute; content: ""; display: block; border-right: 2px solid var(--color-main); border-top: 2px solid var(--color-main); bottom: 0; height: 8px; left: 50%; transform: translateX(-50%) rotate(135deg); width: 8px; } html:not([data-script-enabled=true]) .p-panel-introduction-03__more-button { display: none; } .p-panel-introduction-03__more-button[aria-expanded=true] { background-image: none; inset: auto; margin-top: 0; min-height: 28px; position: relative; } .p-panel-introduction-03__more-button[aria-expanded=true]::before { transform: rotate(-45deg); } /* .p-panel-result */ .p-panel-result + .p-panel-result { margin-top: 2rem; } .p-panel-result__anchor:hover .c-media, .p-panel-result__anchor:active .c-media, .p-panel-result__anchor:focus-visible .c-media { opacity: var(--opacity-images); } .p-panel-result__anchor:hover .p-panel-result__title, .p-panel-result__anchor:active .p-panel-result__title, .p-panel-result__anchor:focus-visible .p-panel-result__title { color: var(--color-main); text-decoration: underline; } .p-panel-result__inner { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto 1fr; grid-template-areas: "media title" "content content"; gap: 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-result__inner { grid-template-columns: 1fr 3fr; grid-template-areas: "media title" "media content"; gap: 1rem 1.5rem; } } .p-panel-result__title { grid-area: title; font-size: 1.125rem; } @media only screen and (min-width: 769px) { .p-panel-result__title { font-size: 1.25rem; } } .p-panel-result__content { grid-area: content; height: -moz-fit-content; height: fit-content; display: grid; gap: 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-result__content { gap: 0.5rem; } } .p-panel-result__media { grid-area: media; } /* .p-panel-banner */ .p-panel-banner__wrap { display: flex; flex-direction: column-reverse; gap: 0.5rem 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-banner__wrap { gap: 0.75rem 1.5rem; } .p-panel-banner__wrap:where([href]):hover .p-panel-banner__media-item, .p-panel-banner__wrap:where([href]):active .p-panel-banner__media-item, .p-panel-banner__wrap:where([href]):focus-visible .p-panel-banner__media-item { opacity: var(--opacity-images); } .p-panel-banner__wrap:where([href]):hover .p-panel-banner__link-item, .p-panel-banner__wrap:where([href]):active .p-panel-banner__link-item, .p-panel-banner__wrap:where([href]):focus-visible .p-panel-banner__link-item { color: var(--color-main); text-decoration: underline; } } .p-panel-banner__media { align-items: center; display: inline-flex; flex: 0 0 auto; flex-direction: column; justify-content: center; line-height: 1; max-width: 100%; } .p-panel-banner__media-item { display: block; flex: 1 1 auto; margin: auto; max-width: 100%; } .p-panel-banner__content { flex: 1 1 auto; } .p-panel-banner__content > :first-child { margin-top: 0; } .p-panel-banner__content > :last-child { margin-bottom: 0; } .p-panel-banner__heading { font-family: var(--font-family-hdg); font-size: 1rem; } @media only screen and (min-width: 769px) { .p-panel-banner__heading { font-size: 1.25rem; } } @media only screen and (min-width: 769px) { .p-panel-banner__link-item:where([href]):hover, .p-panel-banner__link-item:where([href]):active, .p-panel-banner__link-item:where([href]):focus-visible { text-decoration: underline; color: var(--color-main); } } .p-panel-banner__link-item--arrow::after { content: url("/assets/common/images/icon/icon-arrow-right-violet-01.svg"); display: inline-block; padding-left: 0.75rem; } /* .p-panel-banner-02 */ .p-panel-banner-02__wrap { display: block; } .p-panel-banner-02__wrap > :first-child { margin-top: 0; } .p-panel-banner-02__wrap > :last-child { margin-bottom: 0; } @media only screen and (min-width: 769px) { .p-panel-banner-02__wrap:where([href]):hover .p-panel-banner-02__media-item, .p-panel-banner-02__wrap:where([href]):active .p-panel-banner-02__media-item, .p-panel-banner-02__wrap:where([href]):focus-visible .p-panel-banner-02__media-item { opacity: var(--opacity-images); } .p-panel-banner-02__wrap:where([href]):hover .p-panel-banner-02__hdg, .p-panel-banner-02__wrap:where([href]):hover .p-panel-banner-02__text, .p-panel-banner-02__wrap:where([href]):active .p-panel-banner-02__hdg, .p-panel-banner-02__wrap:where([href]):active .p-panel-banner-02__text, .p-panel-banner-02__wrap:where([href]):focus-visible .p-panel-banner-02__hdg, .p-panel-banner-02__wrap:where([href]):focus-visible .p-panel-banner-02__text { color: var(--color-main); text-decoration: underline; } } .p-panel-banner-02__hdg { margin-bottom: 1rem; } @media only screen and (min-width: 769px) { .p-panel-banner-02__hdg { margin-bottom: 1.5rem; } } .p-panel-banner-02__hdg-sub { display: block; font-size: 1.25rem; } @media only screen and (min-width: 769px) { .p-panel-banner-02__hdg-sub { font-size: 1.625rem; } } .p-panel-banner-02__media { width: 100%; margin-bottom: 1.25rem; } .promotion-banner .p-panel-banner-02__image-first { display: flex; flex-direction: column; } .promotion-banner .p-panel-banner-02__image-first > .p-panel-banner-02__hdg { order: 2; margin-top: 0; } .promotion-banner .p-panel-banner-02__image-first > .p-panel-banner-02__media { order: 1; } .promotion-banner .p-panel-banner-02__image-first > .p-panel-banner-02__text { order: 3; } /* .p-panel-news --- */ .p-panel-news { margin-bottom: 1.5rem; } .p-panel-news__wrap { display: flex; flex-direction: row-reverse; gap: 0.5rem 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-news__wrap { gap: 1.25rem 1.5rem; } .p-panel-news__wrap:link:hover .p-panel-news__media .c-media__item, .p-panel-news__wrap:link:active .p-panel-news__media .c-media__item, .p-panel-news__wrap:link:focus-visible .p-panel-news__media .c-media__item { opacity: var(--opacity-images); } .p-panel-news__wrap:link:hover .p-panel-news__text, .p-panel-news__wrap:link:active .p-panel-news__text, .p-panel-news__wrap:link:focus-visible .p-panel-news__text { color: var(--color-main); text-decoration: underline; } } .p-panel-news__content { flex: 1 1 auto; width: 100%; } .p-panel-news__media { flex: 0 0 auto; line-height: 1; margin: 0 auto; max-width: 50%; } .p-panel-news__head { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .p-panel-news__date { flex: 0 0 auto; } .p-panel-news__text, .p-panel-news__text-sub { margin-bottom: 0.5rem; } /* .p-panel-news-02 --- */ .p-panel-news-02 { margin-bottom: 1.5rem; } .p-panel-news-02__wrap { display: flex; flex-direction: row-reverse; gap: 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-news-02__wrap { gap: 1.5rem; } } .p-panel-news-02__wrap:hover .c-media, .p-panel-news-02__wrap:active .c-media, .p-panel-news-02__wrap:focus-visible .c-media { opacity: var(--opacity-images); } .p-panel-news-02__wrap:hover .p-panel-news-02__title, .p-panel-news-02__wrap:hover .p-panel-news-02__text, .p-panel-news-02__wrap:active .p-panel-news-02__title, .p-panel-news-02__wrap:active .p-panel-news-02__text, .p-panel-news-02__wrap:focus-visible .p-panel-news-02__title, .p-panel-news-02__wrap:focus-visible .p-panel-news-02__text { color: var(--color-main); text-decoration: underline; } .p-panel-news-02__content { flex: 1 1 auto; width: 100%; } .p-panel-news-02__title { font-size: 1.125rem; } @media only screen and (min-width: 769px) { .p-panel-news-02__title { font-size: 1.25rem; } } .p-panel-news-02__text { margin-top: 1rem; } /* .p-panel-notice --- */ .p-panel-notice { background-color: var(--color-table-current); margin-bottom: 6rem; padding: 1.5rem; } .p-panel-notice__item + .p-panel-notice__item { margin-top: 2rem; } .p-panel-notice__date { display: block; margin-bottom: 0.5rem; } /* .p-panel-faq --- */ .p-panel-faq { margin-bottom: 2rem; } @media only screen and (min-width: 769px) { .p-panel-faq { margin-bottom: 2.5rem; } } .p-panel-faq__item { background-color: var(--color-bg-box); display: block; padding: 1.25rem; } @media only screen and (min-width: 769px) { .p-panel-faq__item { padding: 1.5rem; } } .p-panel-faq__item + .p-panel-faq__item { margin-top: 2rem; } @media only screen and (min-width: 769px) { .p-panel-faq__item + .p-panel-faq__item { margin-top: 2.5rem; } } .p-panel-faq__wrap { display: flex; flex-direction: column-reverse; gap: 0.75rem 1.5rem; } @media only screen and (min-width: 769px) { .p-panel-faq__wrap { flex-direction: row-reverse; } } .p-panel-faq__wrap + .p-panel-faq__content { margin-top: 1rem; } .p-panel-faq__wrap:link:hover .p-panel-faq__image, .p-panel-faq__wrap:link:active .p-panel-faq__image, .p-panel-faq__wrap:link:focus-visible .p-panel-faq__image { opacity: var(--opacity-images); } .p-panel-faq__wrap:link:hover .p-panel-faq__link, .p-panel-faq__wrap:link:active .p-panel-faq__link, .p-panel-faq__wrap:link:focus-visible .p-panel-faq__link { color: var(--color-main); text-decoration: underline; } .p-panel-faq__media { flex: 0 0 auto; max-width: 100%; } @media only screen and (min-width: 769px) { .p-panel-faq__media { max-width: 50%; } } .p-panel-faq__image { display: block; height: auto; margin: auto; max-width: 100%; } .p-panel-faq__body { flex: 1 1 100%; } .p-panel-faq__heading { font-size: 1.25rem; margin-bottom: 1rem; } @media only screen and (min-width: 769px) { .p-panel-faq__link:hover, .p-panel-faq__link:active, .p-panel-faq__link:focus-visible { text-decoration: underline; color: var(--color-main); } } /* .p-panel-live --- */ .p-panel-live { margin-bottom: 2rem; } @media only screen and (min-width: 769px) { .p-panel-live { margin-bottom: 2.5rem; } } .p-panel-live__list { display: flex; flex-wrap: wrap; gap: 2rem; } @media only screen and (min-width: 769px) { .p-panel-live__list { flex-direction: row; gap: 2.5rem 1.5rem; } } .p-panel-live__item { flex: 1 1 100%; border: 1px solid var(--color-line); } @media only screen and (min-width: 769px) { .p-panel-live__item { flex-basis: calc((100% - 1.5rem * 3) / 4); flex-shrink: 1; max-width: calc((100% - 1.5rem * 3) / 4); } } .p-panel-live__wrap { display: flex; flex-direction: column-reverse; } .p-panel-live__wrap:link:hover .p-panel-live__image, .p-panel-live__wrap:link:active .p-panel-live__image, .p-panel-live__wrap:link:focus-visible .p-panel-live__image { opacity: var(--opacity-images); } .p-panel-live__wrap:link:hover .p-panel-live__link, .p-panel-live__wrap:link:active .p-panel-live__link, .p-panel-live__wrap:link:focus-visible .p-panel-live__link { color: var(--color-main); text-decoration: underline; } .p-panel-live__media { flex: 1 1 auto; max-width: 100%; } .p-panel-live__image { display: block; height: auto; margin: auto; max-width: 100%; width: 100%; } .p-panel-live__body { flex: 1 1 100%; padding: 0.5rem 0.75rem 0.75rem; position: relative; } @media only screen and (min-width: 769px) { .p-panel-live__body { padding-bottom: 6rem; padding-top: 2.25rem; } } .p-panel-live__label { background-color: var(--color-bg-box); display: inline-block; font-size: 0.875rem; margin-bottom: 0.5rem; padding: 0.25rem 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-live__label { left: 0.75rem; margin-bottom: 0rem; position: absolute; top: 0.5rem; } } .p-panel-live__heading { font-size: 1.5rem; margin-bottom: 1rem; } .p-panel-live__text { margin-bottom: 16px; } @media only screen and (min-width: 769px) { .p-panel-live__text { margin-bottom: 0; } } .p-panel-live__info { display: flex; flex-direction: column; gap: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-live__info { bottom: 0.75rem; left: 0.75rem; position: absolute; } } .p-panel-live__date { font-weight: bold; padding-left: 1.75rem; position: relative; } .p-panel-live__date::before { background-image: url("/assets/common/images/icon/icon-clock-violet-01.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.9375rem 0.9375rem; content: ""; display: block; height: 0.9375rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 0.9375rem; } .p-panel-live__flag { font-weight: bold; } .p-panel-live__more-button { margin-top: -6.25rem; padding-top: 4.375rem; position: relative; } .p-panel-live__more-button::before { background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%); content: ""; display: block; height: 6.25rem; left: 0; position: absolute; top: 0; width: 100%; } /* .p-panel-check */ .p-panel-check__wrap { align-items: flex-start; display: flex; flex-direction: column-reverse; gap: 0.5rem 0.75rem; position: relative; } @media only screen and (min-width: 769px) { .p-panel-check__wrap { gap: 0.75rem 1.5rem; } .p-panel-check__wrap:where([href]):hover .p-panel-check__media-item, .p-panel-check__wrap:where([href]):active .p-panel-check__media-item, .p-panel-check__wrap:where([href]):focus-visible .p-panel-check__media-item { opacity: var(--opacity-images); } .p-panel-check__wrap:where([href]):hover .p-panel-check__link-item, .p-panel-check__wrap:where([href]):active .p-panel-check__link-item, .p-panel-check__wrap:where([href]):focus-visible .p-panel-check__link-item { color: var(--color-main); text-decoration: underline; } } .p-panel-check__checkbox { background-color: var(--color-white); border-top: 0.125rem solid var(--color-line); border-left: 0.125rem solid var(--color-line); display: block; height: 1rem; left: 0; position: absolute; top: 0; width: 1rem; z-index: var(--zindex-layer1); } @media only screen and (min-width: 769px) { .p-panel-check__checkbox { height: 1.625rem; width: 1.625rem; } } .p-panel-check__checkbox::before, .p-panel-check__checkbox::after { position: absolute; content: ""; display: block; } .p-panel-check__checkbox::before { border: 0.125rem solid var(--color-main); height: 1.0625rem; left: -0.125rem; top: -0.125rem; width: 1.0625rem; } @media only screen and (min-width: 769px) { .p-panel-check__checkbox::before { height: 1.5rem; width: 1.5rem; } } .p-panel-check__checkbox + .p-panel-check__media { border: 0.125rem solid var(--color-line); position: relative; } .p-panel-check__checkbox + .p-panel-check__media::before { position: absolute; content: ""; display: block; border: 0.125rem solid var(--color-white); height: 100%; left: 0; top: 0; width: 100%; } .p-panel-check__checkbox:checked { border-top-color: var(--color-main); border-left-color: var(--color-main); } .p-panel-check__checkbox:checked::before { background-color: var(--color-main); } .p-panel-check__checkbox:checked::after { border-bottom: 0.125rem solid var(--color-white); border-left: 0.125rem solid var(--color-white); height: 0.3125rem; left: 0.25rem; top: calc(50% - 3px); transform: rotate(-45deg) translateY(-50%); width: 0.5625rem; } @media only screen and (min-width: 769px) { .p-panel-check__checkbox:checked::after { left: 0.5rem; } } .p-panel-check__checkbox:checked + .p-panel-check__media { border: 0.125rem solid var(--color-main); } .p-panel-check__media { align-items: center; display: inline-flex; flex: 0 0 auto; flex-direction: column; justify-content: center; margin: auto; max-width: 100%; width: 100%; line-height: 1; } @media only screen and (min-width: 769px) { .p-panel-check__media:link:hover, .p-panel-check__media:link:active, .p-panel-check__media:link:focus-visible { opacity: 0.7; } } .p-panel-check__media-item { display: block; flex: 1 1 auto; height: auto; margin: auto; width: 100%; } .p-panel-check__content { flex: 1 1 auto; } .p-panel-check__label:not(:empty) { margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-check__label:not(:empty) { margin-bottom: 0.25rem; } } .p-panel-check__label-list { display: flex; flex-wrap: wrap; gap: 0.25rem; } @media only screen and (min-width: 769px) { .p-panel-check__label-list { gap: 0.5rem; } } .p-panel-check__label-item { flex: 0 0 auto; } .p-panel-check__title { margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-check__title { margin-bottom: 0.25rem; } } .p-panel-check__title-main { font-size: 1.5rem; } .p-panel-check__title-sub::before { content: ''; display: inline-block; margin-right: 0.5rem; } .p-panel-check__title-sub { font-size: 1.125rem; } .p-panel-check__category { margin-bottom: 0.25rem; } @media only screen and (min-width: 769px) { .p-panel-check__category { margin-bottom: 0.5rem; } } .p-panel-check__price { font-weight: bold; margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-check__price { margin-bottom: 0.25rem; } } .p-panel-check__duration { margin-bottom: 0.5rem; } @media only screen and (min-width: 769px) { .p-panel-check__duration { margin-bottom: 0.75rem; } } .p-panel-check__textarea { margin-bottom: 1rem; position: relative; } @media only screen and (min-width: 769px) { .p-panel-check__textarea { margin-bottom: 1.5rem; } } .p-panel-check__more-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-panel-check__more-button { background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%); bottom: 0; display: block; margin-top: 16px; min-height: 40px; position: absolute; width: 100%; } .p-panel-check__more-button::before { position: absolute; content: ""; display: block; border-right: 2px solid var(--color-main); border-top: 2px solid var(--color-main); bottom: 0; height: 8px; left: 50%; transform: translateX(-50%) rotate(135deg); width: 8px; } html:not([data-script-enabled=true]) .p-panel-check__more-button { display: none; } .p-panel-check__more-button[aria-expanded=true] { background-image: none; inset: auto; margin-top: 0; min-height: 28px; position: relative; } .p-panel-check__more-button[aria-expanded=true]::before { transform: rotate(-45deg); } .p-panel-check__link { display: flex; flex-direction: column; } .p-panel-check__link .p-panel-check__label { order: 1; } .p-panel-check__link .p-panel-check__title { order: 2; } .p-panel-check__link > * { order: 3; } @media only screen and (min-width: 769px) { .p-panel-check__link:where([href]):hover .p-panel-check__title-main, .p-panel-check__link:where([href]):active .p-panel-check__title-main, .p-panel-check__link:where([href]):focus-visible .p-panel-check__title-main { color: var(--color-main); text-decoration: underline; } } .p-panel-check__link--arrow::after { content: url("/assets/common/images/icon/icon-arrow-right-violet-01.svg"); display: inline-block; padding-left: 0.75rem; } .p-panel-check__compare { display: none; background-color: rgba(25, 29, 31, 0.6); bottom: 0; min-height: 5rem; padding-bottom: 0.875rem; padding-top: 0.875rem; position: sticky; width: 100vw; margin: 0 calc(50% - 50vw); z-index: var(--zindex-layer2); } .p-panel-check__compare.is-visible { display: block; overflow: auto; } .p-panel-check__color-variable-wrap { display: flex; align-items: center; } .p-panel-check__color-variable-image { margin-right: 12px; flex-shrink: 0; width: 22px; height: 22px; } .p-panel-check__color-variable-text { font-size: 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-check__color-variable-text { font-size: 0.875rem; } } .p-panel-check.is-disabled { color: var(--color-font-default-disabled); } .p-panel-check.is-disabled .p-panel-check__media { opacity: var(--opacity-images); cursor: not-allowed; } .p-panel-check.is-disabled .p-panel-check__checkbox::before { border-color: var(--color-main-disabled); } /* .p-panel-downloads */ .p-panel-downloads__wrap { display: flex; flex-direction: column-reverse; gap: 0.75rem 0; } @media only screen and (min-width: 769px) { .p-panel-downloads__wrap { flex-direction: row-reverse; justify-content: flex-end; gap: 0 1.5rem; } } .p-panel-downloads__head { display: flex; flex-direction: column-reverse; } .p-panel-downloads__body { flex: 1 1 100%; } .p-panel-downloads__media { display: inline-flex; flex: 1 1 100%; justify-content: center; } @media only screen and (min-width: 769px) { .p-panel-downloads__media { align-items: start; max-width: 11.5625rem; } } .p-panel-downloads__label:not(:empty) { margin-bottom: 0.5rem; } .p-panel-downloads__title { font-family: var(--font-family); margin-bottom: 0.75rem; } @media only screen and (min-width: 769px) { .p-panel-downloads__title { margin-bottom: 1rem; } } @media only screen and (min-width: 769px) { .p-panel-downloads__link:where([href]):hover, .p-panel-downloads__link:where([href]):active, .p-panel-downloads__link:where([href]):focus-visible { color: var(--color-main); text-decoration: underline; } } .p-panel-downloads__desc { margin-bottom: 0.25rem; } @media only screen and (min-width: 769px) { .p-panel-downloads__desc { margin-bottom: 0.5rem; } } .p-panel-downloads__file-size { margin-bottom: 0.25rem; } .p-panel-downloads__issue-date { margin-bottom: 0.25rem; } @media only screen and (min-width: 769px) { .p-panel-downloads__issue-date { margin-bottom: 0; } } .p-panel-downloads__add { margin-top: 1.5rem; } @media only screen and (max-width: 768px) { .p-panel-downloads__add { display: none; } } /* form * ---------------------------- */ .p-form { margin-top: 4rem; } /* .p-form-label --- */ .p-form-label { display: block; margin-bottom: 0.5rem; } /* .p-form-checkbox --- */ .p-form-checkbox { margin-bottom: 1rem; } .p-form-checkbox--center { text-align: center; } /* .p-form-checkbox --- */ .p-form-checkbox-list { margin-bottom: 1rem; } .p-form-checkbox-list__list { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; } @media only screen and (min-width: 769px) { .p-form-checkbox-list__list { gap: 0.5rem 1.5rem; } } .p-form-checkbox-list[data-col-narrow=auto] .p-form-checkbox-list__item { max-width: -moz-fit-content; max-width: fit-content; } @media only screen and (min-width: 769px) { .p-form-checkbox-list[data-col-narrow=auto] .p-form-checkbox-list__list { gap: 1rem 4rem; } } .p-form-checkbox-list__item { flex-basis: calc((100% - 24px) / 2); flex-grow: 1; flex-shrink: 1; max-width: calc((100% - 24px) / 2); } @media only screen and (min-width: 769px) { .p-form-checkbox-list__item { flex-basis: calc((100% - 96px) / 5); max-width: calc((100% - 96px) / 5); } } .p-form-checkbox-list--center .p-form-checkbox-list__list { justify-content: center; } .p-form-checkbox-list .c-form-text { padding-left: 1.625rem; } @media only screen and (max-width: 768px) { .p-form-checkbox-list--one-line .p-form-checkbox-list__list { justify-content: flex-start; } .p-form-checkbox-list--one-line .p-form-checkbox-list__item { flex-basis: 100%; max-width: 100%; } } /* .p-form-carousel-checkbox --- */ .p-form-carousel-checkbox { position: relative; margin-bottom: 1rem; padding-left: 42px; padding-right: 42px; } .p-form-carousel-checkbox .c-form-text { padding-left: 1.625rem; } .p-form-carousel-checkbox .c-link-icon { vertical-align: baseline; } .p-form-carousel-checkbox__arrows { position: absolute; top: 16px; left: 0; width: 100%; } .p-form-carousel-checkbox__arrow { position: absolute; } .p-form-carousel-checkbox__arrow--prev { left: 0; } .p-form-carousel-checkbox__arrow--next { right: 0; } /* .p-form-radio --- */ .p-form-radio-list { margin-bottom: 1rem; } .p-form-radio-list__list { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; } @media only screen and (min-width: 769px) { .p-form-radio-list__list { gap: 0.75rem 1.5rem; } } .p-form-radio-list[data-col-narrow=auto] .p-form-radio-list__item { max-width: -moz-fit-content; max-width: fit-content; } @media only screen and (min-width: 769px) { .p-form-radio-list[data-col-narrow=auto] .p-form-radio-list__list { gap: 1rem 4rem; } .p-form-radio-list[data-col-narrow=auto] .p-form-radio-list__item { max-width: -moz-fit-content; max-width: fit-content; } } .p-form-radio-list__item { flex-basis: calc((100% - 24px) / 2); flex-grow: 1; flex-shrink: 1; max-width: calc((100% - 24px) / 2); } @media only screen and (min-width: 769px) { .p-form-radio-list__item { flex-basis: calc((100% - 96px) / 5); max-width: calc((100% - 96px) / 5); } } .p-form-radio-list--center .p-form-radio-list__list { justify-content: center; } .p-form-radio-list .c-form-text { padding-left: 1.625rem; } @media only screen and (max-width: 768px) { .p-form-radio-list--one-line .p-form-radio-list__list { justify-content: flex-start; } .p-form-radio-list--one-line .p-form-radio-list__item { flex-basis: 100%; max-width: 100%; } } /* .p-form-select-list --- */ .p-form-select-list { margin-bottom: 1rem; } .p-form-select-list__list { display: flex; flex-direction: column; gap: 1.25rem 2.75rem; } @media only screen and (min-width: 769px) { .p-form-select-list__list { flex-direction: row; } } .p-form-select-list__item { flex: 1 1 100%; position: relative; } .p-form-select-list__item::after { background-image: url("/assets/common/images/icon/icon-arrows-down-gray-01.svg"); background-position: center; background-repeat: no-repeat; background-size: 0.875rem 0.75rem; bottom: -1rem; content: ""; display: block; height: 0.75rem; position: absolute; right: 50%; transform: translateX(50%); width: 0.875rem; } @media only screen and (min-width: 769px) { .p-form-select-list__item::after { background-image: url("/assets/common/images/icon/icon-arrows-right-gray-01.svg"); background-size: 0.75rem 0.875rem; bottom: 50%; height: 0.75rem; right: -1.8125rem; transform: translateY(50%); width: 0.875rem; } } .p-form-select-list__item:last-child::after { content: none; } .p-form-select-list + .p-form-select-list { margin-top: -0.5rem; } @media only screen and (min-width: 769px) { .p-form-select-list[data-col-wide="2"] .p-form-select-list__item { max-width: calc((100% - 2.75rem) / 2); } .p-form-select-list[data-col-wide="3"] .p-form-select-list__item { max-width: calc((100% - 5.5rem) / 3); } } /* .p-form-select-no-related-list --- */ .p-form-select-no-related-list { margin-bottom: 1rem; } .p-form-select-no-related-list__list { display: flex; flex-direction: column; flex-wrap: wrap; gap: 0; gap: 0.5rem 1rem; } @media only screen and (min-width: 769px) { .p-form-select-no-related-list__list { flex-direction: row; } } @media only screen and (min-width: 769px) { .p-form-select-no-related-list[data-col-wide="2"] .p-form-select-no-related-list__item { width: calc((100% - 1rem) / 2); } .p-form-select-no-related-list[data-col-wide="3"] .p-form-select-no-related-list__item { width: calc((100% - 2rem) / 3); } } /* .p-form-search --- */ .p-form-search { background-color: var(--color-bg-box); margin-bottom: 1rem; } .p-form-search__content { margin: 0 1rem; padding: 1.5rem 0; } .p-form-search__content + .p-form-search__content { border-top: 1px solid var(--color-white); margin-top: -0.5rem; padding-top: 1rem; } .p-form-search__form + .p-form-search__form { margin-top: 1rem; } .p-form-search__heading { font-size: 1.25rem; margin-bottom: 0.5rem; } .p-form-search__toggle-target-wrap { overflow: hidden; transition: height var(--transition-duration); } .p-form-search__btn-toggle-wrap { position: relative; margin-bottom: 1rem; text-align: center; } .p-form-search__btn-toggle-wrap::before { position: absolute; content: ""; display: block; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 1px; background-color: var(--color-main); } .p-form-search__btn-toggle { position: relative; display: inline-flex; align-items: center; padding: 0.5rem 1rem; border: 1px solid var(--color-main); color: var(--color-main); background-color: var(--color-white); border-radius: 25px; } .p-form-search__btn-toggle[aria-expanded=false] .p-form-search__btn-toggle-icon--close { display: none; } .p-form-search__btn-toggle[aria-expanded=true] .p-form-search__btn-toggle-icon--open { display: none; } .p-form-search__btn-toggle-icon-wrap { display: flex; align-items: center; flex-shrink: 0; margin-left: 12px; } .p-form-search__btn-toggle-icon--open { width: 14px; height: 14px; } .p-form-search__btn-toggle-icon--close { width: 14px; height: 2px; } .p-form-search .c-button__btn--primary { padding: 0.5rem 1rem; } .p-form-search .p-button { margin-top: 1.5rem; } /* Tool Tip --- */ /* .p-tool-tip */ .p-tool-tip { position: relative; display: inline-block; font-size: 1rem; margin-left: 12px; } .p-tool-tip__btn--open { position: relative; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-weight: bold; color: var(--color-main); background-color: var(--color-white); border: 1px solid var(--color-main); border-radius: 50%; } .p-tool-tip__btn--open.is-show::before { position: absolute; content: ""; display: block; bottom: 19px; left: 50%; border: 5px solid transparent; border-top: 9px solid var(--color-white); transform: translateX(-50%); z-index: var(--zindex-layer4); } .p-tool-tip__btn--open.is-show::after { position: absolute; content: ""; display: block; bottom: 18px; left: 50%; border: 5px solid transparent; border-top: 9px solid var(--color-main); transform: translateX(-50%); z-index: var(--zindex-layer2); } .p-tool-tip__btn--open.is-show + .p-tool-tip__content { display: block; } .p-tool-tip__btn--open.is-bottom::before { top: 24px; bottom: 0; border-top: none; border-bottom: 9px solid var(--color-white); } .p-tool-tip__btn--open.is-bottom::after { top: 22px; bottom: 0; border-top: none; border-bottom: 9px solid var(--color-main); } .p-tool-tip__btn--open.is-bottom + .p-tool-tip__content { top: calc(100% + 12px); bottom: 0; } .p-tool-tip__btn--close { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; } .p-tool-tip__btn--close::before, .p-tool-tip__btn--close::after { position: absolute; content: ""; display: block; width: 20px; height: 3px; top: 50%; left: 50%; background-color: var(--color-main); } .p-tool-tip__btn--close::before { transform: translate(-50%, -50%) rotate(45deg); } .p-tool-tip__btn--close::after { transform: translate(-50%, -50%) rotate(-45deg); } .p-tool-tip__btn--alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .p-tool-tip__content { --tooltip-left: 0; position: absolute; content: ""; display: block; display: none; bottom: calc(100% + 12px); left: var(--tooltip-left); width: 343px; max-width: calc(100vw - 32px); height: max-content; font-weight: normal; background-color: var(--color-white); border: 1px solid var(--color-main); padding: 18px 36px 18px 16px; z-index: var(--zindex-layer3); } @media only screen and (min-width: 769px) { .p-tool-tip__content { --tooltip-left: -86px; width: 400px; } } /* Filter Table --- */ /* .p-filter-table */ .p-filter-table th { min-width: auto; } .p-filter-table__control { display: flex; align-items: center; justify-content: space-between; font-stretch: condensed; margin-bottom: 28px; } @media only screen and (min-width: 769px) { .p-filter-table__control { margin-bottom: 32px; } } .p-filter-table__desc { display: flex; gap: 12px; margin-bottom: 1rem; } @media only screen and (max-width: 768px) { .p-filter-table__desc { display: none; } } .p-filter-table__desc-icon { width: 24px; height: 24px; flex-shrink: 0; } .p-filter-table__result { font-family: var(--font-family); font-size: 1.25rem; } .p-filter-table__result-num { font-stretch: normal; font-weight: bold; } .p-filter-table__select { padding: 8px 32px 8px 14px; border: 1px solid var(--color-line); } .p-filter-table__select-wrap { position: relative; } .p-filter-table__image { display: block; height: 0.375rem; pointer-events: none; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 0.6875rem; z-index: 10; } .p-filter-table__anchor { margin-bottom: 4px; } .p-filter-table__anchor:hover, .p-filter-table__anchor:active, .p-filter-table__anchor:focus-visible { color: var(--color-main); text-decoration: underline; } .p-filter-table__anchor-img { vertical-align: middle; margin-left: 12px; } .p-filter-table__icon-wrap { display: flex; } .p-filter-table__matter { flex: 1; } .p-filter-table__icon { width: 36px; height: 36px; flex-shrink: 0; margin-left: 16px; } @media only screen and (max-width: 768px) { .p-filter-table__icon { display: none; } } .p-filter-table__icon-btn { display: block; width: 100%; height: 100%; border: 1px solid var(--color-main); background-color: var(--color-white); border-radius: 50%; background-image: url("/assets/common/images/icon/icon-add-to-list-violet-01.svg"); background-repeat: no-repeat; background-position: center; transition: background-color var(--transition-duration), background-image var(--transition-duration); } .p-filter-table__icon-btn:hover, .p-filter-table__icon-btn:active, .p-filter-table__icon-btn:focus-visible { background-color: var(--color-main); background-image: url("/assets/common/images/icon/icon-add-to-list-white-01.svg"); } .p-filter-table__icon-btn.is-active { background-color: var(--color-main); background-image: url("/assets/common/images/icon/icon-add-to-list-white-01.svg"); } .p-filter-table__icon-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* Filter Panel --- */ /* .p-filter-panel */ .p-filter-panel__control { display: flex; align-items: center; justify-content: space-between; font-stretch: condensed; margin-bottom: 28px; } @media only screen and (min-width: 769px) { .p-filter-panel__control { margin-bottom: 32px; } } .p-filter-panel__result { font-family: var(--font-family); font-size: 1.25rem; } .p-filter-panel__result-num { font-stretch: normal; font-weight: bold; } .p-filter-panel__select { padding: 8px 32px 8px 14px; border: 1px solid var(--color-line); } .p-filter-panel__select-wrap { position: relative; } .p-filter-panel__image { display: block; height: 0.375rem; pointer-events: none; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 0.6875rem; z-index: 10; } .p-filter-panel__anchor { margin-bottom: 4px; } .p-filter-panel__anchor:hover, .p-filter-panel__anchor:active, .p-filter-panel__anchor:focus-visible { color: var(--color-main); text-decoration: underline; } .p-filter-panel__anchor-img { vertical-align: middle; margin-left: 12px; } /* Filter News --- */ /* .p-filter-news */ .p-filter-news__control { display: flex; align-items: center; justify-content: space-between; font-stretch: condensed; margin-bottom: 28px; } @media only screen and (min-width: 769px) { .p-filter-news__control { margin-bottom: 32px; } } .p-filter-news__result { font-family: var(--font-family); font-size: 1.25rem; } .p-filter-news__result-num { font-stretch: normal; font-weight: bold; } /* button * ---------------------------- */ /* .p-button --- */ .p-button { margin-bottom: 1.5rem; } /* .p-button-sns */ .p-button-sns { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw + var(--js-scrollbar-width) / 2); } /* .p-button-sns-tob */ .p-button-sns-tob { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw + var(--js-scrollbar-width) / 2); } /* Hero * ---------------------------- */ /* .p-hero --- */ .p-hero { align-items: center; display: flex; flex-direction: column; height: 16.5rem; justify-content: center; margin-top: 4rem; margin-bottom: 4rem; overflow: hidden; position: relative; } @media only screen and (min-width: 769px) { .p-hero { height: 18.75rem; margin-top: 4.5rem; margin-bottom: 5rem; } } .p-hero__content { bottom: 0; flex: 1 1 100%; left: 0; margin: auto; padding: 2.5rem 1.875rem; position: absolute; right: 0; text-align: center; top: 0; z-index: 10; } @media only screen and (min-width: 769px) { .p-hero__content { max-width: 50rem; padding-bottom: 3.125rem; padding-top: 3.125rem; } } .p-hero__content-inner { align-items: center; border: 1px solid var(--color-white); display: flex; flex-direction: column; gap: 1.5rem; height: 100%; justify-content: center; } @media only screen and (min-width: 769px) { .p-hero__content-inner { gap: 1.875rem; } } .p-hero__heading { color: var(--color-white); font-size: 1.625rem; } @media only screen and (min-width: 769px) { .p-hero__heading { font-size: 1.875rem; } } .p-hero__lead { color: var(--color-white); font-size: 1.125rem; } @media only screen and (min-width: 769px) { .p-hero__lead { font-size: 1.25rem; } } .p-hero__link-item { display: block; } .p-hero__media { align-items: center; display: flex; flex: 1 1 100%; justify-content: center; max-width: 100%; width: 100%; } .p-hero__image { display: block; height: 16.5rem; margin: auto; object-fit: cover; width: 100%; } @media only screen and (min-width: 769px) { .p-hero__image { height: 18.75rem; } } .p-hero-contact { height: 15.625rem; margin-top: 4rem; overflow: hidden; position: relative; } @media only screen and (min-width: 769px) { .p-hero-contact { height: 20.5rem; margin-top: 4.5rem; } } .p-hero-contact__content { bottom: 0; flex: 1 1 100%; left: 0; margin: auto; max-width: 60rem; padding: 1.25rem 1rem; position: absolute; right: 0; text-align: center; top: 0; z-index: 10; } @media only screen and (min-width: 769px) { .p-hero-contact__content { padding: 2.5rem 1.875rem; } } .p-hero-contact__content-inner { align-items: center; background-color: rgba(40, 34, 62, 0.85); display: flex; flex-direction: column; gap: 0.5rem; padding: 2rem 0.9375rem; height: 100%; justify-content: space-around; } @media only screen and (min-width: 769px) { .p-hero-contact__content-inner { padding: 2.5rem 0.9375rem; } } .p-hero-contact__lead { color: var(--color-white); font-size: 1.125rem; } @media only screen and (min-width: 769px) { .p-hero-contact__lead { font-size: 1.25rem; } } .p-hero-contact__btn { font-size: 0.875rem; color: var(--color-white); background-color: var(--color-main); border: 1px solid var(--color-white); border-radius: 25px; padding: 0.5rem 1.5rem; min-width: 12.3125rem; } @media only screen and (min-width: 769px) { .p-hero-contact__btn { font-size: 1rem; padding: 0.75rem 1.875rem; min-width: 16.4375rem; } } .p-hero-contact__btn:hover, .p-hero-contact__btn:active, .p-hero-contact__btn:focus-visible { background-color: #785898; } .p-hero-contact__media { display: flex; flex: 1 1 100%; justify-content: center; max-width: 100%; width: 100%; } .p-hero-contact__image { display: block; height: 15.625rem; margin: auto; object-fit: cover; width: 100%; } @media only screen and (min-width: 769px) { .p-hero-contact__image { height: 20.5rem; } } /* .p-hero-feature --- */ .p-hero-feature { margin-bottom: 3.75rem; margin-top: 3.75rem; } @media only screen and (min-width: 769px) { .p-hero-feature { margin-bottom: 5rem; margin-top: 5rem; } } /* .p-hero-feature-02 --- */ .p-hero-feature-02 { margin-bottom: 3.75rem; margin-top: 3.75rem; } @media only screen and (min-width: 769px) { .p-hero-feature-02 { margin-bottom: 5rem; margin-top: 5rem; } } /* Tab --- */ /* .p-tab */ .p-tab { margin-bottom: 3.75rem; } @media only screen and (min-width: 769px) { .p-tab { margin-bottom: 5rem; } } /* other * ---------------------------- */ /* .p-hr --- */ .p-hr { margin-bottom: 4rem; margin-top: 4rem; } @media only screen and (min-width: 769px) { .p-hr { margin-bottom: 5rem; margin-top: 5rem; } } /* .p-label --- */ .p-label { margin-bottom: 0.75rem; } @media only screen and (min-width: 769px) { .p-label { margin-bottom: 0.5rem; } } .p-label__list { display: flex; flex-wrap: wrap; gap: 0.25rem; } @media only screen and (min-width: 769px) { .p-label__list { gap: 0.5rem; } } .p-label__item { flex: 0 0 auto; } /* .p-facebook-page --- */ .p-facebook-page { margin-bottom: 2.5rem; } .p-facebook-page__list { display: flex; flex-wrap: wrap; flex-direction: column; gap: 2rem; text-align: center; } @media only screen and (min-width: 769px) { .p-facebook-page__list { flex-direction: row; gap: 2rem 2.5rem; } } .p-facebook-page__item { flex: 1 1 auto; min-width: 18.75rem; max-width: 100%; width: 343px; margin-right: auto; margin-left: auto; } @media only screen and (min-width: 769px) { .p-facebook-page__item { flex-basis: calc((100% - (2.5rem * 2)) / 3); max-width: calc((100% - (2.5rem * 2)) / 3); width: 373px; margin-right: unset; margin-left: unset; } } .fb-page-wrap { position: relative; } .fb-page { position: relative; width: 100%; height: auto; } /* See More --- */ /* .p-see-more */ /* .p-see-all */ .p-see-more .is-hidden, .p-see-all .is-hidden { display: none; } .p-see-more__btn, .p-see-all__btn { position: relative; top: 0; left: 0; justify-content: center; margin-top: 2.5rem; z-index: var(--zindex-default); } .p-table + .p-see-more__btn, .p-table + .p-see-all__btn { top: -70px; } .p-table + .p-see-more__btn::before, .p-table + .p-see-all__btn::before { position: absolute; content: ""; display: block; top: -70px; left: 0; width: 100%; min-height: 100px; background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, var(--color-white) 100%); } @media only screen and (min-width: 769px) { .p-table + .p-see-more__btn::before, .p-table + .p-see-all__btn::before { top: -70px; } } /* .p-panzoom-image --- */ .p-panzoom-image { position: relative; overflow: hidden; } .p-panzoom-image__parent { border: 1px solid var(--color-line); } .p-panzoom-image__parent img { display: block; margin: 0 auto; } .p-panzoom-image__btns { display: flex; flex-direction: column; position: absolute; top: 0; right: 0; border: 1px solid var(--color-main); z-index: var(--zindex-layer1); } .p-panzoom-image__btn { position: relative; width: 3.125rem; height: 3.125rem; background-color: rgba(255, 255, 255, 0.8); } .p-panzoom-image__btn + .p-panzoom-image__btn { border-top: 1px solid var(--color-main); } .p-panzoom-image__btn-icon { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; line-height: 1; } /* .dl-list */ .dl-list { position: absolute; top: -3rem; right: 6.375rem; display: none; z-index: var(--zindex-to-pagetop); } @media only screen and (max-width: 768px) { .dl-list { display: none; } } .dl-list__btn { display: flex; background-color: var(--color-white); border: 1px solid var(--color-main); border-top-left-radius: 25px; border-bottom-left-radius: 25px; color: var(--color-main); transition: background-color var(--transition-duration), color var(--transition-duration); } .dl-list__btn:hover, .dl-list__btn:active, .dl-list__btn:focus-visible { background-color: var(--color-main); color: var(--color-white); } .dl-list__btn:hover .dl-list__text::after, .dl-list__btn:active .dl-list__text::after, .dl-list__btn:focus-visible .dl-list__text::after { background-image: url("/assets/common/images/icon/icon-download-list-white-01.svg"); } .dl-list__text { display: flex; align-items: center; padding: 6px 26px 6px 20px; } .dl-list__text::after { content: ""; width: 14px; height: 18px; margin-left: 12px; background-image: url("/assets/common/images/icon/icon-download-list-violet-01.svg"); background-repeat: no-repeat; background-size: cover; transition: background-image var(--transition-duration); } .dl-list__num { position: absolute; top: 0; right: 0; transform: translateX(50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background-color: var(--color-main); color: var(--color-white); } .dl-list.is-shown { display: inline-block; } /* widget * ---------------------------- */ /* .p-carousel --- */ .p-carousel { margin-bottom: 2.5rem; } .p-carousel__wrap { margin: 1.25rem; } @media only screen and (min-width: 769px) { .p-carousel__wrap { margin: 2.5rem; } } .p-carousel__inner { position: relative; } .p-carousel__list { display: flex; flex-wrap: nowrap; margin-bottom: 0.75rem; } @media only screen and (min-width: 769px) { .p-carousel__list { margin-bottom: 1rem; } } .p-carousel__item { flex: 1 1 100%; min-width: 100%; width: 100%; } .p-carousel__anchor { display: block; } .p-carousel__anchor:where([href]):hover, .p-carousel__anchor:where([href]):active, .p-carousel__anchor:where([href]):focus-visible { opacity: 0.7; } .p-carousel__media { max-width: 100%; } .p-carousel__media-item { display: block; height: auto; margin: auto; width: 100%; } .p-carousel__arrow { left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .p-carousel__arrow-item { position: absolute; top: 50%; transform: translateY(-50%); } .p-carousel__arrow-item--preview { left: -1.25rem; } @media only screen and (min-width: 769px) { .p-carousel__arrow-item--preview { left: -2.625rem; } } .p-carousel__arrow-mv .p-carousel__arrow-item--preview { left: 0.25rem; } @media only screen and (min-width: 769px) { .p-carousel__arrow-mv .p-carousel__arrow-item--preview { left: 1rem; } } .p-carousel__arrow-item--next { right: -1.25rem; } @media only screen and (min-width: 769px) { .p-carousel__arrow-item--next { right: -2.625rem; } } .p-carousel__arrow-mv .p-carousel__arrow-item--next { right: 0.25rem; } @media only screen and (min-width: 769px) { .p-carousel__arrow-mv .p-carousel__arrow-item--next { right: 1rem; } } .p-carousel__arrow-button { display: block; } .p-carousel__arrow-image { display: block; height: auto; margin: auto; max-width: 100%; pointer-events: none; } .p-carousel__control-inner { align-items: center; display: flex; gap: 1.5rem; justify-content: center; margin-left: auto; margin-right: auto; max-width: var(--width-max-content); } .p-carousel__control-btn { padding: 0.625rem; } .p-carousel__control-item { align-items: center; display: flex; flex: 0 0 auto; gap: 0.5rem; justify-content: center; } .p-carousel__indicator { flex: 0 0 auto; } .p-carousel__indicator-list { display: flex; gap: 0.5rem; } .p-carousel__indicator-item { flex: 0 0 auto; } .p-carousel__indicator-button { display: block; padding: 0.625rem; position: relative; height: 0.125rem; width: 2.5rem; transition: width var(--transition-duration); } .p-carousel__indicator-button::before { position: absolute; content: ""; display: block; background-color: #7d7589; height: 0.125rem; left: 0; top: 50%; transform: translateY(-50%); transition: width var(--transition-duration); width: 2.5rem; } .p-carousel__indicator-button::after { position: absolute; content: ""; display: block; background-color: var(--color-main); height: 0.25rem; left: 0; top: 50%; transform: translateY(-50%); transition: width var(--transition-duration); } .p-carousel__indicator-button.is-active { width: 5rem; } .p-carousel__indicator-button.is-active::before { width: 5rem; } .p-carousel__indicator-button.is-active::after { width: calc(var(--rate) / 1 * 100%); } .p-carousel__indicator-button:hover, .p-carousel__indicator-button:active, .p-carousel__indicator-button:focus-visible { width: 5rem; } .p-carousel__indicator-button:hover::before, .p-carousel__indicator-button:active::before, .p-carousel__indicator-button:focus-visible::before { width: 5rem; } .p-carousel__indicator-button:hover::after, .p-carousel__indicator-button:active::after, .p-carousel__indicator-button:focus-visible::after { width: 100%; } .p-carousel__indicator-text { color: transparent; display: block; height: 0; overflow: hidden; width: 0; } .p-carousel .c-link-icon { vertical-align: middle; } /* Pseudo-elements --- */ /* .p-pseudo-elements */ .p-pseudo-elements__none::after, .p-pseudo-elements__none::before { content: none; } /* Object/Utility * ---------------------------- */ /* Utility --- */ /* .u-w-n ----------------------------------------------- */ .u-w-5 { width: 5% !important; } .u-w-10 { width: 10% !important; } .u-w-15 { width: 15% !important; } .u-w-20 { width: 20% !important; } .u-w-25 { width: 25% !important; } .u-w-30 { width: 30% !important; } .u-w-35 { width: 35% !important; } .u-w-40 { width: 40% !important; } .u-w-45 { width: 45% !important; } .u-w-50 { width: 50% !important; } .u-w-55 { width: 55% !important; } .u-w-60 { width: 60% !important; } .u-w-65 { width: 65% !important; } .u-w-70 { width: 70% !important; } .u-w-75 { width: 75% !important; } .u-w-80 { width: 80% !important; } .u-w-85 { width: 85% !important; } .u-w-90 { width: 90% !important; } .u-w-95 { width: 95% !important; } .u-w-100 { width: 100% !important; } /* .u-w-pc-n ----------------------------------------------- */ @media only screen and (min-width: 769px) { .u-w-pc-5 { width: 5% !important; } .u-w-pc-10 { width: 10% !important; } .u-w-pc-15 { width: 15% !important; } .u-w-pc-20 { width: 20% !important; } .u-w-pc-25 { width: 25% !important; } .u-w-pc-30 { width: 30% !important; } .u-w-pc-35 { width: 35% !important; } .u-w-pc-40 { width: 40% !important; } .u-w-pc-45 { width: 45% !important; } .u-w-pc-50 { width: 50% !important; } .u-w-pc-55 { width: 55% !important; } .u-w-pc-60 { width: 60% !important; } .u-w-pc-65 { width: 65% !important; } .u-w-pc-70 { width: 70% !important; } .u-w-pc-75 { width: 75% !important; } .u-w-pc-80 { width: 80% !important; } .u-w-pc-85 { width: 85% !important; } .u-w-pc-90 { width: 90% !important; } .u-w-pc-95 { width: 95% !important; } .u-w-pc-100 { width: 100% !important; } } /* .u-ta-* ----------------------------------------------- */ .u-ta-l { text-align: left !important; } .u-ta-c { text-align: center !important; } .u-ta-r { text-align: right !important; } /* .u-va-* ----------------------------------------------- */ .u-va-t { vertical-align: top !important; } .u-va-m { vertical-align: middle !important; } .u-va-b { vertical-align: bottom !important; } /* .u-hidden ----------------------------------------------- */ .u-hidden { display: none !important; } /* Object/Widget * ---------------------------- */ /* Toggle --- */ [data-script-enabled=true] .fn-header-overlay { display: none; } [data-script-enabled=true] .fn-header-overlay.is-overlay { display: block; } /* Toggle --- */ [data-script-enabled=true] .js-toggle__target.is-close { display: none; } /* .js-toggle-sp */ [data-script-enabled=true] .js-toggle-sp__target.is-close { display: none; } /* ChangeProductsAnotherType --- */ [data-script-enabled=true] .js-change-products-types__target.is-hidden { display: none; } /* Suggest (jQuery UI) --- */ .ui-autocomplete.ui-front { z-index: var(--zindex-overlay); } /* Free HTML */ .revert-free-html h1 { font-size: 2.5rem; } .revert-free-html h2 { font-size: 2.25rem; } .revert-free-html h3 { font-size: 1.875rem; margin-bottom: 1.5rem; } .revert-free-html h4 { font-size: 1.5rem; margin-bottom: 0.75rem; } .revert-free-html h5 { font-size: 1.375rem; } .revert-free-html h6 { font-size: 1.25rem; } .revert-free-html p { margin-bottom: 1.25rem; } .revert-free-html strong { font-weight: revert; } .revert-free-html th { font-weight: bold; } :is(.free-html-markup, .revert-free-html) :is(ol, ul) { list-style: revert; list-style-position: outside; margin-left: 1.0rem; } .revert-free-html.p-box-scroll__content ul { padding-left: 1em; } @media only screen and (max-width: 768px) { .revert-free-html h1 { font-size: 2.125rem; } .revert-free-html h2 { font-size: 1.875rem; } .revert-free-html h3 { font-size: 1.5rem; } .revert-free-html h4 { font-size: 1.25rem; } } .p-table-spec .c-table-scroll__inner [class^="u-w-"] { width: 100px !important; overflow-wrap: break-word; } @media only screen and (max-width: 768px) { .c-table-scroll__inner [class^="u-w-"] { width: 80px !important; } } /* support table */ /* Firmware & Software Tab */ #search-downloads-tab-content-5 .p-filter-table .p-table colgroup col:nth-child(2), #dialog-previous-versions-02 .p-table colgroup col:nth-child(2) { min-width: 160px; } #search-downloads-tab-content-5 .p-filter-table .p-table colgroup col:nth-child(3), #dialog-previous-versions-02 .p-table colgroup col:nth-child(3) { min-width: 115px; } #search-downloads-tab-content-5 .p-filter-table .p-table colgroup col:nth-child(4), #dialog-previous-versions-02 .p-table colgroup col:nth-child(4) { min-width: 90px; } #search-downloads-tab-content-5 .p-filter-table .p-table colgroup col:nth-child(5), #dialog-previous-versions-02 .p-table colgroup col:nth-child(5) { min-width: 110px; } /* Manuals & Documents Tab */ /* Documents and Data */ #search-downloads-tab-content-6 .p-filter-table .p-table colgroup col:nth-child(2), #search-downloads-tab-content-8 .p-filter-table .p-table colgroup col:nth-child(2) { min-width: 110px; } #search-downloads-tab-content-6 .p-filter-table .p-table colgroup col:nth-child(3), #search-downloads-tab-content-8 .p-filter-table .p-table colgroup col:nth-child(3) { min-width: 95px; } /* Site Search */ /* Firmware & Software Tab */ #tab-content-2 #filter-target-01 .p-filter-table .p-table colgroup col:nth-child(2), #tab-content-3 .js-tab-radio [data-related-target="filter-target-01"] .p-filter-table .p-table colgroup col:nth-child(2), #dialog-previous-versions-02 .p-table colgroup col:nth-child(2) { min-width: 160px; } #tab-content-2 #filter-target-01 .p-filter-table .p-table colgroup col:nth-child(3), #tab-content-3 .js-tab-radio [data-related-target="filter-target-01"] .p-filter-table .p-table colgroup col:nth-child(3), #dialog-previous-versions-02 .p-table colgroup col:nth-child(3) { min-width: 115px; } #tab-content-2 #filter-target-01 .p-filter-table .p-table colgroup col:nth-child(4), #tab-content-3 .js-tab-radio [data-related-target="filter-target-01"] .p-filter-table .p-table colgroup col:nth-child(4), #dialog-previous-versions-02 .p-table colgroup col:nth-child(4) { min-width: 90px; } #tab-content-2 #filter-target-01 .p-filter-table .p-table colgroup col:nth-child(5), #tab-content-3 .js-tab-radio [data-related-target="filter-target-01"] .p-filter-table .p-table colgroup col:nth-child(5), #dialog-previous-versions-02 .p-table colgroup col:nth-child(5) { min-width: 110px; } /* Manuals & Documents Tab */ /* Documents and Data */ #tab-content-2 #filter-target-02 .p-filter-table .p-table colgroup col:nth-child(2), #tab-content-2 #filter-target-04 .p-filter-table .p-table colgroup col:nth-child(2), #tab-content-3 .js-tab-radio [data-related-target="filter-target-04"] .p-filter-table .p-table colgroup col:nth-child(2) { min-width: 110px; } #tab-content-2 #filter-target-02 .p-filter-table .p-table colgroup col:nth-child(3), #tab-content-2 #filter-target-04 .p-filter-table .p-table colgroup col:nth-child(3) #tab-content-3 .js-tab-radio [data-related-target="filter-target-04"] .p-filter-table .p-table colgroup col:nth-child(3) { min-width: 95px; } /* Product Cart List * ---------------------------- */ .p-panel-check__compare > .p-button { margin-bottom: 2.5rem; } @media only screen and (min-width: 769px) { .p-panel-check__compare > .p-button { margin-bottom: 1.5rem; } } .p-panel-check__compare > .l-dl-list { position: sticky; bottom: 0; display: block; max-width: var(--width-max-content); margin: 0 auto; } .p-panel-check__compare > .l-dl-list > .dl-list { top: -2rem; left: 50%; transform: translateX(-50%); } @media only screen and (min-width: 769px) { .p-panel-check__compare > .l-dl-list > .dl-list { top: -4rem; left: calc(50% + 8.75rem); right: inherit; transform: inherit; } } @media only screen and (min-width: 1251px) { .d-pc-block { display: block !important; } } @media only screen and (max-width: 1250px) { .ms-sp-0 { margin-left: 0 !important; } .ps-sp-0 { padding-left: 0 !important; } }