/*!************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/style.scss ***! \************************************************************************************************************************************************************************************/ @charset "UTF-8"; /*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */ /* Reset box-model and set borders */ /* ============================================ */ *, ::before, ::after { border-style: solid; border-width: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Document */ /* ============================================ */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. * 3. Remove gray overlay on links for iOS. */ html { line-height: 1.15; /* 2 */ -webkit-tap-highlight-color: transparent; /* 1 */ -webkit-text-size-adjust: 100%; /* 3*/ } /* Sections */ /* ============================================ */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /* Vertical rhythm */ /* ============================================ */ p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0; } /* Headings */ /* ============================================ */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; } /* Lists (enumeration) */ /* ============================================ */ ul, ol { list-style: none; margin: 0; padding: 0; } /* Lists (definition) */ /* ============================================ */ dt { font-weight: bold; } dd { margin-left: 0; } /* Grouping content */ /* ============================================ */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { /* 2 */ border-top-width: 1px; -webkit-box-sizing: content-box; box-sizing: content-box; clear: both; color: inherit; /* 1 */ height: 0; margin: 0; /* 1 */ overflow: visible; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ } address { font-style: inherit; } /* Text-level semantics */ /* ============================================ */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; color: inherit; text-decoration: none; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Replaced content */ /* ============================================ */ /** * Prevent vertical alignment issues. */ svg, img, embed, object, iframe { vertical-align: bottom; } /* Forms */ /* ============================================ */ /** * Reset form fields to make them styleable. * 1. Make form elements stylable across systems iOS especially. * 2. Inherit text-transform from parent. */ button, input, optgroup, select, textarea { -webkit-appearance: none; /* 1 */ -moz-appearance: none; appearance: none; background: transparent; border-radius: 0; color: inherit; font: inherit; margin: 0; padding: 0; text-align: inherit; text-transform: inherit; vertical-align: middle; /* 2 */ } /** * Correct cursors for clickable elements. */ button, [type=button], [type=reset], [type=submit] { cursor: pointer; } button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled { cursor: default; } /** * Improve outlines for Firefox and unify style with input elements & buttons. */ :-moz-focusring { outline: auto; } select:disabled { opacity: inherit; } /** * Remove padding */ option { padding: 0; } /** * Reset to invisible */ fieldset { margin: 0; min-width: 0; padding: 0; } legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * Correct the outline style in Safari. */ [type=search] { outline-offset: -2px; /* 1 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Fix font inheritance. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Fix appearance for Firefox */ [type=number] { -moz-appearance: textfield; } /** * Clickable labels */ label[for] { cursor: pointer; } /* Interactive */ /* ============================================ */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* * Remove outline for editable content. */ [contenteditable]:focus { outline: auto; } /* Tables */ /* ============================================ */ /** 1. Correct table border color inheritance in all Chrome and Safari. */ table { /* 1 */ border-collapse: collapse; border-color: inherit; } caption { text-align: left; } td, th { padding: 0; vertical-align: top; } th { font-weight: bold; text-align: left; } @-webkit-keyframes modal-video { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-video { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes modal-video-inner { from { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes modal-video-inner { from { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .modal-video { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: modal-video; animation-name: modal-video; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; height: 100%; left: 0; opacity: 1; position: fixed; top: 0; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; width: 100%; z-index: 1000000; } .modal-video-close { opacity: 0; } .modal-video-close .modal-video-movie-wrap { -webkit-transform: translate(0, 100px); transform: translate(0, 100px); } .modal-video-body { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; max-width: 960px; padding: 0 10px; width: 100%; } .modal-video-inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } @media (orientation: landscape) { .modal-video-inner { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 60px; } } .modal-video-movie-wrap { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: modal-video-inner; animation-name: modal-video-inner; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; background-color: #333; height: 0; padding-bottom: 56.25%; position: relative; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; width: 100%; } .modal-video-movie-wrap iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .modal-video-close-btn { background: transparent; border: none; display: inline-block; height: 35px; overflow: hidden; position: absolute; right: 0; top: -45px; width: 35px; z-index: 2; } @media (orientation: landscape) { .modal-video-close-btn { right: -45px; top: 0; } } .modal-video-close-btn:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .modal-video-close-btn:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .modal-video-close-btn:before, .modal-video-close-btn:after { background: #fff; border-radius: 5px; content: ""; height: 2px; left: 0; margin-top: -1px; margin-top: -6px; position: absolute; top: 50%; width: 100%; } .splide__container { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .splide__list { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -ms-flexbox; display: -webkit-box; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { -webkit-box-align: center; align-items: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -ms-flex-pack: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; 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; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; list-style-type: none !important; margin: 0; position: relative; } .splide__slide img { vertical-align: bottom; } .splide__spinner { -webkit-animation: splide-loading 1s linear infinite; animation: splide-loading 1s linear infinite; 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.is-active .splide__toggle__play, .splide__toggle__pause { display: none; } .splide__toggle.is-active .splide__toggle__pause { display: inline; } .splide__track { overflow: hidden; position: relative; z-index: 0; } @-webkit-keyframes splide-loading { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes splide-loading { 0% { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; -ms-user-select: none; -moz-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__arrow { -webkit-box-align: center; align-items: center; background: #ccc; border: 0; border-radius: 50%; cursor: pointer; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -ms-flex-pack: center; height: 2em; -webkit-box-pack: center; justify-content: center; opacity: 0.7; padding: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 2em; z-index: 1; } .splide__arrow svg { fill: #000; height: 1.2em; width: 1.2em; } .splide__arrow:hover:not(:disabled) { opacity: 0.9; } .splide__arrow:disabled { opacity: 0.3; } .splide__arrow:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide__arrow--prev { left: 1em; } .splide__arrow--prev svg { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .splide__arrow--next { right: 1em; } .splide.is-focus-in .splide__arrow:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__pagination { bottom: 0.5em; left: 0; padding: 0 1em; position: absolute; right: 0; z-index: 1; } .splide__pagination__page { background: #ccc; border: 0; border-radius: 50%; display: inline-block; height: 8px; margin: 3px; opacity: 0.7; padding: 0; position: relative; -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; width: 8px; } .splide__pagination__page.is-active { background: #fff; -webkit-transform: scale(1.4); transform: scale(1.4); z-index: 1; } .splide__pagination__page:hover { cursor: pointer; opacity: 0.9; } .splide__pagination__page:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__pagination__page:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__progress__bar { background: #ccc; height: 3px; } .splide__slide { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .splide__slide:focus { outline: 0; } @supports (outline-offset: -3px) { .splide__slide:focus-visible { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide__slide:focus-visible { border: 3px solid #0bf; } } @supports (outline-offset: -3px) { .splide.is-focus-in .splide__slide:focus { outline: 3px solid #0bf; outline-offset: -3px; } } @media screen and (-ms-high-contrast: none) { .splide.is-focus-in .splide__slide:focus { border: 3px solid #0bf; } .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus { border-color: #0bf; } } .splide__toggle { cursor: pointer; } .splide__toggle:focus-visible { outline: 3px solid #0bf; outline-offset: 3px; } .splide.is-focus-in .splide__toggle:focus { outline: 3px solid #0bf; outline-offset: 3px; } .splide__track--nav > .splide__list > .splide__slide { border: 3px solid transparent; cursor: pointer; } .splide__track--nav > .splide__list > .splide__slide.is-active { border: 3px solid #000; } .splide__arrows--rtl .splide__arrow--prev { left: auto; right: 1em; } .splide__arrows--rtl .splide__arrow--prev svg { -webkit-transform: scaleX(1); transform: scaleX(1); } .splide__arrows--rtl .splide__arrow--next { left: 1em; right: auto; } .splide__arrows--rtl .splide__arrow--next svg { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .splide__arrows--ttb .splide__arrow { left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); } .splide__arrows--ttb .splide__arrow--prev { top: 1em; } .splide__arrows--ttb .splide__arrow--prev svg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .splide__arrows--ttb .splide__arrow--next { bottom: 1em; top: auto; } .splide__arrows--ttb .splide__arrow--next svg { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .splide__pagination--ttb { bottom: 0; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; left: auto; padding: 1em 0; right: 0.5em; top: 0; } /* xl 82 - 56 38 - 24 32 - 23 28 - 20 26 - 18 18 - 14 14 - 12 btn 18 - 18 */ :root { --font-family-base: -apple-system,"Noto Sans JP", Helvetica Neue,"Hiragino Kaku Gothic ProN",meiryo,sans-serif; --device-width-sp: 600px; --device-width-tablet:768px; --device-width-pc: 960px; --device-width-pc-wrap: 1280px; --fontSize-root: 16px; --fontSize-base: 1rem; --fontSize-h1: calc(1rem * (26/16)); --fontSize-h2: calc(1rem * (24/16)); --fontSize-h3: calc(1rem * (20/16)); --fontSize-h4: calc(1rem * (18/16)); --fontSize-h5: 1rem; --fontSize-h6: 1rem; --fontSize-notice: calc(1rem * (14/16)); --fontSize-s: calc(1rem * (14/16)); --fontSize-ss: calc(1rem * (12/16)); --fontSize-min: calc(1rem * (10/16)); --fontSize-responsive__s: clamp(0.75rem, 1vw + 0.5rem, 0.875rem); --radius: 5px; /* color */ --color-black: #000; --color-link: #1378d0; --color-key: #dd2723; --color-key-light: #ffeded; --color-cleam: #fffae6; --color-gray-00: #fcfaf5; --color-gray-01: #f4f4f4; --color-gray-02: #e6e6e6; --color-gray-03: #dcdcdc; --color-gray-04: #b4b4b4; --color-gray-05: #999; --color-gray-06: #666; --color-gray-07: #333; --color-green: #8bc34a; --color-pdf: #B30B00; --color-sat:#e6f5f7; --color-holiday:#f7e6dc; --color-answer: var(--color-green); --color-question: var(--color-key); --color-font__dark: var(--color-gray-07); --color-font__light: var(--color-gray-06); --color-font__lighter: var(--color-gray-05); --color-font__note: var(--color-gray-06); --color-font__copy: var(--color-gray-06); --color-require: var(--color-key); --color-state__green: var(--color-green); --color-state__few: #ef9a9a; --color-state__none: #aaa; --color-state__none__bg: var(--color-gray-02); --color-state__disable: var(--color-gray-05); --color-state__disable__bg: var(--color-gray-03); --color-state__error: var(--color-key); --color-state__error__light: var(--color-key-light); --color-state__active: var(--color-cleam); --color-bg__cream__light: var(--color-gray-00); --color-bg__gray__lighter: var(--color-gray-01); --color-bg__gray__light: var(--color-gray-02); --color-bg__gray: var(--color-gray-03); --color-bg__gray__dark: var(--color-gray-04); --color-bg__gray__darker: var(--color-gray-05); --color-bg__gray__darkest: var(--color-gray-06); --color-border__key: var(--color-key); --color-border__gray__lightest: var(--color-gray-01); --color-border__gray__lighter: var(--color-gray-02); --color-border__gray__light: var(--color-gray-03); --color-border__gray: var(--color-gray-04); --color-border__gray__dark: var(--color-gray-05); --color-border__gray__darkest: var(--color-gray-06); --color-kanwagata: #549e09; --color-ichijibarai: #e38c00; --color-bicycle: #65bc81; --color-gan: #ee89b5; --color-iryo: #ef8982; --color-juniornisa: #f29300; --color-kikin: #f6aa19; --color-episode: #dd2723; --color-seimei: #dd2723; --color-songai: #64bc81; --color-literacy: #dd2723; --color-mortgage: #f6aa19; --color-nisa: #f6aa19; } @media only screen and (min-width: 960px) { :root { --fontSize-h1: calc(1rem * (30/16)); } } /* noto-sans-jp-regular - japanese */ @font-face { font-display: swap; font-family: "Noto Sans JP"; font-style: normal; font-weight: normal; src: url("/hm2024/assets/fonts/NotoSansJP-Regular.woff2") format("woff2"); } /* noto-sans-jp-700 - japanese */ @font-face { font-display: swap; font-family: "Noto Sans JP"; font-style: normal; font-weight: bold; src: url("/hm2024/assets/fonts/NotoSansJP-Bold.woff2") format("woff2"); } html { font-family: var(--font-family-base); font-size: var(--fontSize-root); line-height: 1.6; } body { color: var(--color-black); word-break: break-all; } *, ::before, ::after { -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: none; } a { color: var(--color-link); text-decoration: none; } @media (hover: hover) { a:hover { text-decoration: underline; } } @media only screen and (min-width: 960px) { a[href*="tel:"] { color: inherit; cursor: default; pointer-events: none; text-decoration: none; } } img { height: auto; max-width: 100%; } sup { top: -0.25em; } /* Chrome, Safari */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* FireFox, IE */ input[type=number] { -moz-appearance: textfield; } [v-cloak] { display: none; } @-webkit-keyframes fadeIn { 0% { opacity: 0 !important; } 100% { opacity: 1 !important; } } @keyframes fadeIn { 0% { opacity: 0 !important; } 100% { opacity: 1 !important; } } @-webkit-keyframes fadeOut { 0% { opacity: 1 !important; } 100% { display: none; opacity: 0 !important; } } @keyframes fadeOut { 0% { opacity: 1 !important; } 100% { display: none; opacity: 0 !important; } } .l-body { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 100dvh; overflow-anchor: none; } .l-header { background: #fff; border-bottom: 1px solid var(--color-border__gray__light); display: block; left: 0; position: sticky; top: 0; width: 100%; z-index: 100; } .l-header.c-header__scrolling { background: var(--bg-color-header); } .l-header__content { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 1rem; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 14px; padding-top: 14px; width: 100%; } .l-header__logo { width: 136px; } @media only screen and (min-width: 960px) { .l-header__logo { width: 222px; } } .l-header__btn-group { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 0.5rem; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (min-width: 960px) { .l-header__btn-group { gap: 1rem; } } .l-header__btn { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: var(--fontSize-min); gap: 3px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-decoration: none; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media only screen and (min-width: 960px) { .l-header__btn { border-radius: 10em; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; font-size: var(--fontSize-s); gap: 1em; padding: 0.5em 1em; width: 220px; } } @media (hover: hover) { .l-header__btn:hover { opacity: 0.6; } .l-header__btn:hover .m-icon--arrow { -webkit-transform: translateX(3px); transform: translateX(3px); } } .l-header__btn .m-icon, .l-header__btn .m-form-error .is-error:before, .m-form-error .l-header__btn .is-error:before { margin: 0; } .l-header__btn .m-icon--arrow { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .l-header__btn__text { color: var(--color-black); } .l-header__btn--reservation .m-icon--tel { color: var(--color-key); font-size: 2em; } @media only screen and (min-width: 960px) { .l-header__btn--reservation { background: var(--color-key); border: var(--color-key) solid 2px; } .l-header__btn--reservation .l-header__btn__text { color: #fff; } .l-header__btn--reservation .m-icon--tel { color: #fff; display: block; font-size: 1.5em; } } .l-header__btn--mypage { display: none; } @media only screen and (min-width: 960px) { .l-header__btn--mypage { background: #fff; border: var(--color-key) solid 2px; display: -webkit-box; display: -ms-flexbox; display: flex; } .l-header__btn--mypage .m-icon--login, .l-header__btn--mypage .m-icon--arrow { color: var(--color-key); } .l-header__btn--mypage .m-icon--login { font-size: 1.5em; } } .l-header__btn--search .m-icon--arrow { display: none; } .l-header__btn--search .m-icon--search { color: var(--color-key); font-size: 2em; } @media only screen and (min-width: 960px) { .l-header__btn--search { background: var(--color-key); border: var(--color-key) solid 2px; } .l-header__btn--search .l-header__btn__text { color: #fff; } .l-header__btn--search .m-icon--search, .l-header__btn--search .m-icon--arrow { color: #fff; display: block; } .l-header__btn--search .m-icon--search { font-size: 1.5em; } } .l-header__btn--navigation .m-icon--menu { color: var(--color-key); } .l-header__btn--navigation .m-icon--menu { font-size: 2em; } .l-header__navigation { border-top: 1px solid var(--color-border__gray__light); padding: 14px 0; } @media only screen and (max-width: 959.98px) { .l-header__navigation { display: none; } } .l-header__navigation__lists { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; max-width: var(--device-width-pc-wrap); width: 100%; } .l-header__navigation__lists li { border-left: 1px solid var(--color-border__gray__light); line-height: 1.2; padding: 0.25em 0.75em; text-align: center; } .l-header__navigation__lists li:first-child { border-left: none; } .l-header__navigation__lists a { color: var(--color-black); display: block; position: relative; } .l-header__navigation__lists a:after { background-color: var(--color-key); bottom: -8px; content: ""; height: 2px; left: 50%; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 0; } @media (hover: hover) { .l-header__navigation__lists a { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .l-header__navigation__lists a:hover { color: var(--color-font__light); text-decoration: none; } .l-header__navigation__lists a:hover:after { width: 100%; } } .l-breadcrumbs { border-top: 1px solid var(--color-border__gray__light); -webkit-box-ordinal-group: 100; -ms-flex-order: 99; order: 99; width: 100%; z-index: 1; } @media only screen and (min-width: 960px) { .l-breadcrumbs { background: -webkit-gradient(linear, left top, right top, from(var(--color-bg__gray__lighter)), color-stop(50%, var(--color-bg__gray__lighter)), color-stop(50%, #fff), to(#fff)); background: -webkit-linear-gradient(left, var(--color-bg__gray__lighter) 0%, var(--color-bg__gray__lighter) 50%, #fff 50%, #fff 100%); background: linear-gradient(to right, var(--color-bg__gray__lighter) 0%, var(--color-bg__gray__lighter) 50%, #fff 50%, #fff 100%); } } .l-breadcrumbs__lists { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: -webkit-linear-gradient(left, var(--color-bg__gray__lighter) 0, var(--color-bg__gray__lighter) 20px, #fff 20px, #fff 100%); background: linear-gradient(to right, var(--color-bg__gray__lighter) 0, var(--color-bg__gray__lighter) 20px, #fff 20px, #fff 100%); color: var(--color-font__light); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; font-size: var(--fontSize-ss); overflow-x: auto; overflow-y: hidden; } .l-breadcrumbs__lists li { background-color: var(--color-bg__gray__lighter); -ms-flex-negative: 0; flex-shrink: 0; margin-left: -2em; margin-right: 1em; padding: 0.9em 1.75em 0.9em 2em; position: relative; } .l-breadcrumbs__lists li:after { background-color: var(--color-bg__gray__lighter); border-bottom: 1px solid var(--color-border__gray__light); border-right: 1px solid var(--color-border__gray__light); content: ""; display: block; height: 2.165em; position: absolute; right: 0; top: 50%; -webkit-transform: rotate(-60deg) skewX(-30deg); transform: rotate(-60deg) skewX(-30deg); -webkit-transform-origin: left top; transform-origin: left top; width: 2.5em; z-index: 1; } .l-breadcrumbs__lists li:first-child { margin-left: 0; padding-left: 0; } .l-breadcrumbs__lists li:last-child { background-color: #fff; margin-right: 0; } .l-breadcrumbs__lists li:last-child:after { content: none; } .l-breadcrumbs__lists a { color: var(--color-font__light); position: relative; z-index: 2; } .l-main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 80px; position: relative; width: 100%; z-index: 2; } .l-footer { margin-top: auto; -webkit-box-ordinal-group: 101; -ms-flex-order: 100; order: 100; width: 100%; } .l-footer a { color: var(--color-black); } .l-footer__services { background: var(--color-bg__gray__lighter); border-top: 1px solid var(--color-border__gray__light); } .l-footer__services__block { border-bottom: 1px solid var(--color-border__gray__light); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px 0; } .l-footer__services__block:last-child { border-bottom: none; } @media only screen and (min-width: 960px) { .l-footer__services__block { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0 60px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 960px) { .l-footer__services__block--single { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .l-footer__services__block__header { font-size: var(--fontSize-s); font-weight: bold; margin-bottom: 1em; } @media only screen and (min-width: 960px) { .l-footer__services__block__header { width: 12em; } } .l-footer__services__block__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .l-footer__services__block a { font-size: var(--fontSize-s); } .l-footer__services__lists { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .l-footer__services__lists:after { content: ""; display: block; width: calc((100% - 20px) / 2); } @media only screen and (min-width: 960px) { .l-footer__services__lists:after { width: calc((100% - 40px) / 3); } } .l-footer__services__lists li { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid var(--color-border__gray__light); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0.75em 0; width: calc((100% - 20px) / 2); } @media only screen and (min-width: 960px) { .l-footer__services__lists li { width: calc((100% - 40px) / 3); } } .l-footer__services__lists li:nth-child(1), .l-footer__services__lists li:nth-child(2) { border-top: none; } @media only screen and (min-width: 960px) { .l-footer__services__lists li:nth-child(3) { border-top: none; } } .l-footer__services__lists a { position: relative; } @media only screen and (max-width: 959.98px) { .l-footer__services__lists a { display: block; width: 100%; } } .l-footer__links { background: #fff; border-top: 1px solid var(--color-border__gray__light); padding-bottom: 20px; padding-top: 20px; } @media only screen and (min-width: 960px) { .l-footer__links { padding-bottom: 30px; padding-top: 30px; } } .l-footer__links__lists { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: var(--fontSize-ss); gap: 0.5em 1em; } @media only screen and (min-width: 960px) { .l-footer__links__lists { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .l-footer__links__list { border-right: 1px solid var(--color-border__gray__light); padding-right: 1em; } .l-footer__links__list:last-child { border-right: none; } .l-footer__copy { background: var(--color-bg__gray__lighter); color: var(--color-font__copy); padding: 20px 0; } @media only screen and (min-width: 960px) { .l-footer__copy { padding-bottom: 1rem; padding-top: 1rem; } } .l-footer__copy__content { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 5px 0; } @media only screen and (min-width: 960px) { .l-footer__copy__content { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .l-footer__copy__note { font-size: var(--fontSize-s); text-align: center; } @media only screen and (min-width: 960px) { .l-footer__copy__note { font-size: var(--fontSize-ss); } } .l-footer__copy__copyright { font-size: var(--fontSize-ss); font-weight: bold; } .l-aside { width: 100%; } .l-aside--fixed { bottom: 0; display: block; left: 0; -webkit-box-ordinal-group: 102; -ms-flex-order: 101; order: 101; position: sticky; z-index: 99; } .c-accordion { background-color: #fff; border-radius: var(--radius); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); overflow: hidden; } .c-accordion + .c-accordion { margin-top: 1rem; } .c-accordion__trigger { display: block; padding: 1rem 2.5rem 1rem 1rem; position: relative; text-align: left; width: 100%; } @media (hover: hover) { .c-accordion__trigger { -webkit-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out; } .c-accordion__trigger:hover { background: var(--color-bg__gray__lighter); } } .c-accordion__trigger .m-hdg { margin-bottom: 0; } .c-accordion__trigger .m-icon, .c-accordion__trigger .m-form-error .is-error:before, .m-form-error .c-accordion__trigger .is-error:before { color: var(--color-font__light); position: absolute; right: 1rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .c-accordion__body { background: var(--color-bg__gray__lighter); border-top: 1px solid var(--color-border__gray__light); padding: 1rem; } .c-accordion__body > * + * { margin-top: 1em; } .c-accordion--qa .c-accordion__trigger, .c-accordion--qa .c-accordion__body { padding-left: calc(var(--fontSize-h3) * 2); position: relative; } .c-accordion--qa__label { font-size: var(--fontSize-h3); font-weight: bold; left: 1rem; line-height: 1; position: absolute; } .c-accordion--qa__label--q { color: var(--color-question); top: calc(1rem + 0.1em); } .c-accordion--qa__label--a { color: var(--color-answer); top: calc(1rem + 0.15em); } .c-accordion--step .c-accordion__trigger { padding-left: calc(var(--fontSize-ss) * 6 + var(--fontSize-h3)); position: relative; } .c-accordion--step__label { background-color: #fff; border: 1px solid var(--color-key); border-radius: var(--radius); color: var(--color-key); font-size: var(--fontSize-ss); font-weight: bold; left: 1rem; letter-spacing: -0.05em; line-height: 1; padding: 0.25em 1em; position: absolute; text-align: center; } .c-accordion--step__label__num { font-size: var(--fontSize-h3); vertical-align: text-bottom; } .js-accordion__trigger { border: none; outline: none; } @media (hover: hover) { .js-accordion__trigger:hover { cursor: pointer; } } .js-accordion__content { display: none; } .c-filter-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; gap: 10px; } .c-filter-list input { opacity: 0; position: absolute; } .c-filter-list input + label { background: #fff; border: 1px solid var(--color-border__gray__darkest); border-radius: var(--radius); color: var(--color-font__light); cursor: pointer; display: inline-block; font-size: var(--fontSize-s); padding: 0.3em 0.8em; text-decoration: none; vertical-align: baseline; } @media (hover: hover) { .c-filter-list input + label { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .c-filter-list input + label:hover { opacity: 0.65; } } .c-filter-list input:checked + label { background-color: var(--color-bg__gray__darker); color: #fff; } .c-geolocationSearch.is-active { pointer-events: none !important; } .c-geolocationSearch .c-loading__icon { border-width: 2px; height: 24px; width: 24px; } .c-loading { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-loading__overlay { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 100000; /* background: rgba(0,0,0,0.6); */ } .c-loading__icon { -webkit-animation: c-loading__icon-anime 0.8s infinite linear; animation: c-loading__icon-anime 0.8s infinite linear; border: 4px #ddd solid; border-radius: 50%; border-top: 4px var(--color-key) solid; height: 40px; width: 40px; } @-webkit-keyframes c-loading__icon-anime { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes c-loading__icon-anime { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .c-tab { margin-top: 40px; } .c-tab__header { -webkit-box-align: end; -ms-flex-align: end; align-items: end; border-bottom: 2px solid var(--color-key); display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 9px; margin-left: -20px; margin-right: -20px; padding: 0 20px; } .c-tab__header__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .c-tab__header__item > button, .c-tab__header__item > a { background: #fff; border: 1px solid var(--color-border__gray); border-radius: 5px 5px 0 0; border-width: 1px 1px 0; color: var(--color-font__light); display: block; font-size: 14px; font-weight: bold; height: 100%; padding: 5px; position: relative; text-align: center; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: background-color, border-color, color; transition-property: background-color, border-color, color; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; width: 100%; } @media only screen and (min-width: 960px) { .c-tab__header__item > button, .c-tab__header__item > a { font-size: 18px; padding: 13px 10px; } } .c-tab__header__item > button > small, .c-tab__header__item > a > small { display: block; font-size: 12px; } @media only screen and (min-width: 960px) { .c-tab__header__item > button > small, .c-tab__header__item > a > small { display: inline-block; } } .c-tab__header__item > button.is-active, .c-tab__header__item > button.is-current, .c-tab__header__item > a.is-active, .c-tab__header__item > a.is-current { border-color: var(--color-key) var(--color-key) #fff; border-width: 2px 2px 0; bottom: -2px; color: var(--color-key); overflow: hidden; padding-bottom: 7px; } @media only screen and (min-width: 960px) { .c-tab__header__item > button.is-active, .c-tab__header__item > button.is-current, .c-tab__header__item > a.is-active, .c-tab__header__item > a.is-current { padding: 14px 10px 13px; } } @media (hover: hover) { .c-tab__header__item > button:hover, .c-tab__header__item > a:hover { border-color: var(--color-key); color: var(--color-key); text-decoration: none; } } .c-tab__body { margin-left: -20px; margin-right: -20px; } .c-tab__body__content { padding: 30px 20px 0; } .c-tab__body .m-hdg { margin-bottom: 10px; } .js-tab-panel { display: none; } .js-tab-panel.is-active { display: block; } /**************************\ Demo Animation Style \**************************/ @-webkit-keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes mmslideIn { from { -webkit-transform: translateY(15%); transform: translateY(15%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes mmslideIn { from { -webkit-transform: translateY(15%); transform: translateY(15%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes mmslideOut { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-10%); transform: translateY(-10%); } } @keyframes mmslideOut { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-10%); transform: translateY(-10%); } } @-webkit-keyframes mmScaleIn { from { -webkit-transform: scale(0.8); transform: scale(0.8); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes mmScaleIn { from { -webkit-transform: scale(0.8); transform: scale(0.8); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes mmScaleOut { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes mmScaleOut { from { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0.8); transform: scale(0.8); } } .modal { position: relative; z-index: 101; } .micromodal-fade { display: none; } .micromodal-fade.is-open { display: block; } .micromodal-fade[aria-hidden=false] .c-modal-mask { -webkit-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-fade[aria-hidden=true] .c-modal-mask { -webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-fade[aria-hidden=false] .c-modal { -webkit-animation: mmScaleIn 0.3s cubic-bezier(0, 0, 0.2, 1); animation: mmScaleIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-fade[aria-hidden=true] .c-modal { -webkit-animation: mmScaleOut 0.3s cubic-bezier(0, 0, 0.2, 1); animation: mmScaleOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-fade .c-modal, .micromodal-fade .c-modal-mask { will-change: transform; } .c-modal { border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: -25px; max-height: 100dvh; max-width: 500px; padding: 30px; } @media only screen and (min-width: 960px) { .c-modal { max-width: 60vw; } } .c-modal-mask { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: rgba(0, 0, 0, 0.8); bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 10; } .c-modal-mask--flexstart { -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .c-modal__close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 10px; } .c-modal__close__btn { color: #fff; font-size: var(--fontSize-h4); } .c-modal__container { background-color: #fff; border-radius: var(--radius); -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); overflow: hidden; } .c-modal__header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 20px; } .c-modal__body { padding: 20px; } .c-modal .c-modal__header + .c-modal__body { padding-top: 0; } .c-modal__title { font-size: var(--fontSize-h3); } .c-modal__default-button { float: right; } .c-modal--calendar { max-width: 800px; padding: 20px 10px; width: 100%; } @media only screen and (min-width: 960px) { .c-modal--calendar { padding: 30px; } } .c-modal--calendar .c-modal__container { padding: 0; } .c-modal--calendar .c-modal__body { margin: 0; } .c-modal--calendar .c-modal__title { font-weight: bold; } .c-modal--calendar .c-modal__header { gap: 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .c-modal--calendar .m-link { color: var(--color-black); font-size: var(--fontSize-s); } .c-modal--calendar .m-calendar { border-bottom: 1px solid var(--color-border__gray__light); } .c-modal--calendar .m-calendar thead, .c-modal--calendar .m-calendar tbody { display: block; } .c-modal--calendar .m-calendar tr { display: table; width: 100%; } .c-modal--calendar .m-calendar tbody { max-height: 50vh; /*IE(Internet Explorer)・Microsoft Edgeへの対応*/ -ms-overflow-style: none; overflow-x: hidden; overflow-y: scroll; /*Firefoxへの対応*/ scrollbar-width: none; /*Google Chrome、Safariへの対応*/ } .c-modal--calendar .m-calendar tbody::-webkit-scrollbar { display: none; } @media only screen and (min-width: 960px) { .c-modal--calendar .m-calendar tbody { max-height: 70vh; } } .c-modal--image { background-color: transparent; height: auto; margin-top: 0; max-width: 600px; padding: 0; width: auto; } .c-modal--image__container { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 20px; } .c-modal--image__header { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 0 0 5px; } .c-modal--image__header__close { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3px; } .c-modal--image__header__close__text { font-size: var(--fontSize-ss); } .c-modal--image__header .m-icon--cross { font-size: var(--fontSize-h3); } .c-modal--image__body { -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); margin: 0; padding: 0; } .c-modal--navigation { background-color: #fff; height: 100dvh; margin-top: 0; max-width: 100%; padding: 0; width: 100%; } .c-modal--navigation__container { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; padding: 0; } .c-modal--navigation__header { border-bottom: 1px solid var(--color-border__gray__light); gap: 10px; padding: 0 10px; } .c-modal--navigation__header__btn-group { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-right: 1px solid var(--color-border__gray__light); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 4px 10px 4px 0; } .c-modal--navigation__header__close { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: var(--fontSize-min); gap: 3px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .c-modal--navigation__header__close .m-icon--cross { color: var(--color-key); font-size: 1.5em; } .c-modal--navigation__header .m-btn { font-size: var(--fontSize-base); min-height: auto; padding-left: 1em; padding-right: 1em; } .c-modal--navigation__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0; overflow-y: scroll; padding: 0; } .c-modal--navigation ul:not(.c-modal--navigation__lists--sub) .m-icon, .c-modal--navigation ul:not(.c-modal--navigation__lists--sub) .m-form-error .is-error:before, .m-form-error .c-modal--navigation ul:not(.c-modal--navigation__lists--sub) .is-error:before { color: var(--color-font__dark); font-size: var(--fontSize-base); position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .c-modal--navigation__lists li { background: var(--color-bg__gray__lighter); border-top: 1px solid var(--color-border__gray__light); font-weight: bold; padding: 12px 20px; } .c-modal--navigation__lists li.nest { padding: 0; } .c-modal--navigation__lists li .nest__label { border-bottom: 1px solid var(--color-border__gray__light); padding: 12px 20px; } .c-modal--navigation__lists li:first-child { border-top: none; } .c-modal--navigation__lists li > a, .c-modal--navigation__lists li > button { display: block; position: relative; width: 100%; } .c-modal--navigation__lists a { color: var(--color-black); } .c-modal--navigation__lists a:hover { text-decoration: none; } .c-modal--navigation__lists--nest { padding-left: 20px; } .c-modal--navigation__lists--nest li { font-size: var(--fontSize-s); font-weight: normal; padding-bottom: 10px; padding-top: 10px; } .c-modal--navigation__lists--sub li { background: #fff; font-size: var(--fontSize-s); padding-bottom: 20px; padding-top: 20px; } .c-modal--navigation__lists--sub li:first-child { border-top: 1px solid var(--color-border__gray__light); } .c-modal--navigation__lists--sub__header { margin-bottom: 0.5rem; } .c-modal--navigation__lists--sub__body { font-weight: normal; } .c-modal--navigation__lists--footer { background: var(--color-bg__gray__lighter); border-top: 1px solid var(--color-border__gray__light); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 1rem 10px; } .c-modal--navigation__lists--footer li { border-right: 1px solid var(--color-border__gray__light); border-top: none; font-size: var(--fontSize-ss); padding: 3px 10px; text-align: center; width: 33%; } .c-modal--navigation__lists--footer li:last-child { border-right: none; } .c-modal--navigation__lists--footer a { color: var(--color-black); } @media (hover: hover) { .c-modal--navigation__lists--footer a:hover { text-decoration: none; } } .c-modal--navigation__lists__accordion.is-open { background-color: var(--color-bg__cream__light); } .c-modal--navigation__lists__accordion__trigger .m-icon, .c-modal--navigation__lists__accordion__trigger .m-form-error .is-error:before, .m-form-error .c-modal--navigation__lists__accordion__trigger .is-error:before { right: -2px !important; } .c-modal--navigation__lists__accordion__content { margin-top: 1rem; } .c-modal--navigation__lists__form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 1rem; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .c-modal--navigation__lists__form .m-form-input, .c-modal--navigation__lists__form .m-form-select { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .c-modal--navigation__lists__form .m-btn { min-height: auto; padding: 0.5em; width: 5em; } .splide__pagination__page.is-active { background: var(--color-key); } .c-slider-01 { padding: 0 20px 1.5rem; } .c-slider-01 .splide__arrow { background: var(--color-bg__gray__darker); height: 3rem; opacity: 1; width: 1rem; } @media only screen and (min-width: 960px) { .c-slider-01 .splide__arrow { height: 4rem; width: 2rem; } } @media (hover: hover) { .c-slider-01 .splide__arrow { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .c-slider-01 .splide__arrow:hover { background: var(--color-bg__gray__dark); opacity: 1; } } .c-slider-01 .splide__slide { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-slider-01 .splide__slide a { display: block; } .c-slider-01 .splide__slide img { border-radius: var(--radius); height: 60vw; width: auto; } @media only screen and (min-width: 960px) { .c-slider-01 .splide__slide img { height: 308px; } } .c-slider-01 .splide__arrow--prev { border-radius: 0 var(--radius) var(--radius) 0; left: 0; } .c-slider-01 .splide__arrow--next { border-radius: var(--radius) 0 0 var(--radius); right: 0; } .c-slider-01 .splide__arrow svg { fill: #fff; height: 0.5rem; width: 0.5rem; } @media only screen and (min-width: 960px) { .c-slider-01 .splide__arrow svg { height: 1rem; width: 1rem; } } .c-slider-01 .splide__pagination { bottom: 0; } @font-face { font-display: block; font-family: "icomoon"; font-style: normal; font-weight: normal; src: url("/hm2024/assets/fonts/icomoon.ttf?a5y5pm") format("truetype"), url("/hm2024/assets/fonts/icomoon.woff?a5y5pm") format("woff"), url("/hm2024/assets/fonts/icomoon.svg?a5y5pm#icomoon") format("svg"); } .m-icon, .m-form-error .is-error:before { display: inline-block; font-family: "icomoon" !important; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: never; text-transform: none; } .m-icon:before, .m-form-error .is-error:before { display: block; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .m-icon--book:before { content: "\e90b"; } .m-icon--consultation:before { content: "\e900"; } .m-icon--hyphen:before { content: "\e901"; } .m-icon--triangle:before { content: "\e902"; } .m-icon--arrow-circle:before { content: "\e903"; } .m-icon--arrow-double:before { content: "\e904"; } .m-icon--arrow:before { content: "\e905"; } .m-icon--blank:before { content: "\e906"; } .m-icon--calendar:before { content: "\e907"; } .m-icon--char:before { content: "\e908"; } .m-icon--circle:before { content: "\e909"; } .m-icon--company:before { content: "\e90a"; } .m-icon--cross:before { content: "\1f315"; } .m-icon--doublequotation:before { content: "\e90c"; } .m-icon--error:before, .m-form-error .is-error:before { content: "\e90d"; } .m-icon--excel:before { content: "\e90e"; } .m-icon--login:before { content: "\e90f"; } .m-icon--mail:before { content: "\e910"; } .m-icon--menu:before { content: "\e911"; } .m-icon--movie:before { content: "\e912"; } .m-icon--online:before { content: "\e913"; } .m-icon--pdf:before { content: "\e914"; } .m-icon--pin:before { content: "\e915"; } .m-icon--plus:before { content: "\e916"; } .m-icon--question:before { content: "\e917"; } .m-icon--search:before { content: "\e918"; } .m-icon--shop:before { content: "\e919"; } .m-icon--tel:before { content: "\e91a"; } .m-icon--tel2:before { content: "\e91b"; } .m-icon--time:before { content: "\e91c"; } .m-icon--toggle-minus-circle:before { content: "\e91d"; } .m-icon--toggle-plus-circle:before { content: "\e91e"; } .m-icon--word:before { content: "\e91f"; } .m-icon--zip:before { content: "\e920"; } .m-icon--zoom:before { content: "\e921"; } .m-icon--pdf { color: var(--color-pdf) !important; font-size: 1.3em; } .m-icon--blank { color: var(--color-font__light) !important; } a .m-icon, a .m-form-error .is-error:before, .m-form-error a .is-error:before, button .m-icon, button .m-form-error .is-error:before, .m-form-error button .is-error:before { display: inline-block; position: relative; top: 0.02em; } a .m-icon--blank, a .m-icon--pdf, button .m-icon--blank, button .m-icon--pdf { margin-left: 0.5em; } @media only screen and (min-width: 960px) { a:hover .m-icon, a:hover .m-form-error .is-error:before, .m-form-error a:hover .is-error:before, button:hover .m-icon, button:hover .m-form-error .is-error:before, .m-form-error button:hover .is-error:before { text-decoration: none; } } .m-stack { margin-bottom: 0; margin-top: 0; } .m-stack > * + * { margin-top: 2em; } @media only screen and (min-width: 960px) { .m-stack > * + * { margin-top: 2em; } } .m-stack .m-hdg + * { margin-top: 0; } .m-stack--large > * + * { margin-top: 4em; } @media only screen and (min-width: 960px) { .m-stack--large > * + * { margin-top: 5em; } } .m-stack--small > * + * { margin-top: 1em; } .m-stack--xsmall > * + * { margin-top: 0.5em; } .m-calendar { border-bottom: 1px solid var(--color-border__gray__light); width: 100%; } .m-calendar thead { background: #fff; border-bottom: 1px solid var(--color-border__gray__light); } .m-calendar th, .m-calendar td { border: 1px solid var(--color-border__gray__light); border-bottom: none; text-align: center; width: 14.2857142857%; } .m-calendar__no-border th, .m-calendar__no-border td { border: none; } .m-calendar__date { background-color: var(--color-bg__gray__lighter); color: var(--color-font__light); } .m-calendar__date--sat { background-color: var(--color-sat); } .m-calendar__date--holiday { background-color: var(--color-holiday); } .m-calendar__date__month { font-size: var(--fontSize-ss); font-weight: normal; vertical-align: text-top; } .m-calendar__date__day { font-size: var(--fontSize-base); font-weight: bold; vertical-align: text-bottom; } .m-calendar__date__unit { display: block; font-size: var(--fontSize-s); font-weight: normal; } .m-calendar__times { background-color: var(--color-bg__gray__dark); color: #fff; font-size: var(--fontSize-s); font-weight: bold; padding: 0.25em; } .m-calendar a[href*="tel:"].m-calendar__timetable__cell { color: var(--color-font__light); } @media (hover: hover) { .m-calendar a[href*="tel:"].m-calendar__timetable__cell:hover { text-decoration: none; } } .m-calendar__timetable li { border-top: 1px solid var(--color-border__gray__light); } .m-calendar__timetable li:first-child { border-top: none; } .m-calendar__timetable__cell { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; color: var(--color-font__light); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(var(--fontSize-ss) / 2); padding: var(--fontSize-ss) 0; text-decoration: none; width: 100%; } @media only screen and (min-width: 960px) { .m-calendar__timetable__cell { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: calc(var(--fontSize-ss) / 2); padding-right: calc(var(--fontSize-ss) / 2); } } .m-calendar__timetable__cell--spacer { background: var(--color-bg__gray__lighter); height: calc(var(--fontSize-h3) + var(--fontSize-ss) * 3 + var(--fontSize-ss) / 2); } @media only screen and (min-width: 960px) { .m-calendar__timetable__cell--spacer { height: calc(var(--fontSize-h3) + var(--fontSize-ss) * 2); } } @media (hover: hover) { .m-calendar__timetable__cell:hover { background: var(--color-state__active); } } .m-calendar__timetable__cell:disabled { background: var(--color-state__none__bg); } .m-calendar__timetable__cell:disabled .m-calendar__timetable__mark { color: var(--color-state__none); } .m-calendar__timetable__mark { font-size: var(--fontSize-h3); line-height: 0; } .m-calendar__timetable__mark .m-icon--circle { color: var(--color-state__green); } .m-calendar__timetable__mark .m-icon--triangle { color: var(--color-state__few); } .m-calendar__timetable__date { font-size: var(--fontSize-base); font-weight: bold; line-height: 1; } .m-calendar__timetable__date__month { font-size: var(--fontSize-ss); vertical-align: top; } .m-calendar__timetable__time { font-size: var(--fontSize-ss); line-height: 1; } .m-calendar__anchor { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.5em; gap: 1em; } .m-calendar__anchor .m-link--anchor { color: #000; padding: 0.5em; } .m-calendar-status { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: var(--fontSize-s); gap: 0.25rem 0.5rem; } .m-calendar-status .m-icon, .m-calendar-status .m-form-error .is-error:before, .m-form-error .m-calendar-status .is-error:before { line-height: 1.6; } .m-calendar-status .m-icon--circle { color: var(--color-state__green); } .m-calendar-status .m-icon--triangle { color: var(--color-state__few); } .m-calendar-status .m-icon--cross { color: var(--color-state__none); } .m-calendar-status .m-icon--tel { color: var(--color-font__light); } .m-calendar-status li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 3px; } .m-calendar-status__text:before { content: "…"; display: inline-block; } .m-comments { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .m-comments + .m-comments { margin-top: 1rem; } .m-comments__icon { padding-right: 15px; width: 45px; } @media only screen and (min-width: 960px) { .m-comments__icon { padding-right: 32px; width: 80px; } } .m-comments__content { background: #FAFAFA; border: 1px solid #E6E6E6; border-radius: 5px; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; padding: 15px; position: relative; } @media only screen and (min-width: 960px) { .m-comments__content { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 20px; width: calc(100% - 160px); } } .m-comments__content > *:last-child { margin-bottom: 0; } .m-comments__content:before, .m-comments__content:after { border: 10px solid transparent; border-right-color: #E6E6E6; content: ""; display: inline-block; height: 0; left: -21px; position: absolute; top: 15px; width: 0; } .m-comments__content:after { border-right-color: #FAFAFA; left: -20px; } @media only screen and (min-width: 960px) { .m-comments__icon { padding-right: 32px; width: 80px; } .m-comments__content { padding: 20px; width: calc(100% - 160px); } } .m-comments--reverse { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .m-comments--reverse .m-comments__icon { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-left: 15px; padding-right: 0; } .m-comments--reverse .m-comments__content { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .m-comments--reverse .m-comments__content:before, .m-comments--reverse .m-comments__content:after { left: auto; right: -21px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .m-comments--reverse .m-comments__content:after { right: -20px; } @media only screen and (min-width: 960px) { .m-comments--reverse .m-comments__icon { padding-left: 32px; } } .m-container { margin-left: auto; margin-right: auto; max-width: var(--device-width-pc); padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 960px) { .m-container { padding-left: 0; padding-right: 0; } } .m-container .m-container { padding-left: 0; padding-right: 0; } .m-container--narrow { max-width: var(--device-width-tablet); } @media only screen and (min-width: 960px) { .m-container--narrow { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 1280px) { .m-container--narrow { padding-left: 0; padding-right: 0; } } .m-container--wide { max-width: var(--device-width-pc-wrap); } @media only screen and (min-width: 960px) { .m-container--wide { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 1280px) { .m-container--wide { padding-left: 0; padding-right: 0; } } .m-cv { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } @media only screen and (min-width: 960px) { .m-cv--1col { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 960px) { .m-cv--1col .m-cv__item { width: auto; } } @media only screen and (min-width: 960px) { .m-cv { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 40px 0; } } @media only screen and (max-width: 959.98px) { .m-cv__item { border-top: solid 1px var(--color-border__gray__light); padding-top: 20px; } .m-cv__item:first-child { border: none; padding-top: 0; } } @media only screen and (min-width: 960px) { .m-cv__item { padding: 0 30px; width: 50%; } .m-cv__item:nth-child(2n) { border-left: solid 1px var(--color-border__gray__light); } } .m-cv__header { font-size: var(--fontSize-h4); font-weight: bold; margin-bottom: 1em; text-align: center; } @media only screen and (min-width: 960px) { .m-cv__btn .m-btn--tel { background: #fff; border: solid 2px var(--color-border__gray__light); } } .m-cv__reception { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: var(--fontSize-s); gap: 0.25em; margin-top: 1em; } @media only screen and (max-width: 959.98px) { .m-cv__reception { text-align: center; } } @media only screen and (min-width: 960px) { .m-cv__reception { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 2em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .m-cv__reception__term { font-weight: bold; } @media only screen and (min-width: 960px) { .m-cv__reception__term { white-space: nowrap; } } .m-cv__reception__time + .m-cv__reception__time { margin-top: 0.5em; } .m-definition { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .m-definition__term { font-weight: bold; } .m-definition__description { margin-top: 0.5em; } .m-definition__description > * + * { margin-top: 0.5em; } .m-definition--services .m-definition__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 10px 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .m-definition--services .m-definition__item + .m-definition__item { margin-top: 20px; } .m-definition--services .m-definition__item__team { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3px; text-align: center; width: 5em; } .m-definition--services .m-definition__item__team__caption { color: var(--color-font__light); display: block; font-size: var(--fontSize-s); font-weight: normal; line-height: 1.2; } .m-definition--services .m-definition__item__description { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .m-faq { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media only screen and (min-width: 960px) { .m-faq { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .m-faq > div { display: none; } .m-faq > li { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; } @media only screen and (min-width: 960px) { .m-faq > li { width: calc(50% - 10px); } } .m-faq a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; border-radius: var(--radius); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); color: var(--color-black); display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; padding: 1rem 2.5rem 1rem calc(var(--fontSize-h3) * 2); position: relative; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%; } .m-faq a:before { color: var(--color-question); content: "Q"; display: block; font-size: var(--fontSize-h3); font-weight: bold; left: 1rem; line-height: 1; position: absolute; } .m-faq a:after { color: var(--color-font__light); content: "\e903"; display: block; font-family: "icomoon" !important; position: absolute; right: 1rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } @media (hover: hover) { .m-faq a:hover { background: var(--color-bg__gray__lighter); text-decoration: none; } .m-faq a:hover:after { right: calc(1rem - 2px); } } .m-faq--lists { border-bottom: 1px solid var(--color-border__gray__light); border-top: 1px solid var(--color-border__gray__light); gap: 0; } @media only screen and (min-width: 960px) { .m-faq--lists { gap: 0.5rem; padding: 1rem 0; } } @media only screen and (max-width: 959.98px) { .m-faq--lists li { border-bottom: 1px solid var(--color-border__gray__light); } .m-faq--lists li:last-child { border-bottom: none; } } .m-faq--lists a { background-color: transparent; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; color: var(--color-font__base); padding: 1rem 2rem; } @media only screen and (min-width: 960px) { .m-faq--lists a { padding-bottom: 0; padding-top: 0; } } .m-faq--lists a:before { left: 0.25rem; } .m-faq--lists a:after { right: 0.25rem; } @media (hover: hover) { .m-faq--lists a:hover { background: transparent; text-decoration: none; } .m-faq--lists a:hover:after { right: calc(0.25rem - 2px); } } .m-faq-01 { border-bottom: 1px solid var(--color-border__gray__light); border-top: 1px solid var(--color-border__gray__light); } .m-faq-01 + .m-faq-01 { border-top: none; } .m-faq-01 a { color: var(--color-font__base); display: block; padding: 1rem 2rem; position: relative; } .m-faq-01 a:before { color: var(--color-question); content: "Q"; display: block; font-size: var(--fontSize-h3); font-weight: bold; left: 0.25rem; line-height: 1; position: absolute; top: 1rem; } .m-faq-01 a .m-icon--arrow-circle { color: var(--color-font__light); position: absolute; right: 0.5rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (hover: hover) { .m-faq-01 a:hover { text-decoration: underline; } .m-faq-01 a:hover .m-icon--arrow-circle:before { -webkit-transform: translateX(2px); transform: translateX(2px); } } .m-faq-02 { border-bottom: 1px solid var(--color-border__gray__light); border-top: 1px solid var(--color-border__gray__light); padding: 1rem 0.5rem; } .m-faq-02 + .m-faq-02 { border-top: none; margin-top: 0; } .m-faq-02 .m-faq-02__term, .m-faq-02 .m-faq-02__description { padding-left: calc(var(--fontSize-h3) * 1.25); position: relative; } .m-faq-02 .m-faq-02__term:before, .m-faq-02 .m-faq-02__description:before { display: block; font-size: var(--fontSize-h3); font-weight: bold; line-height: 1; position: absolute; } .m-faq-02 .m-faq-02__term { font-weight: bold; } .m-faq-02 .m-faq-02__term:before { color: var(--color-question); content: "Q"; left: 0; top: 0.05em; } .m-faq-02 .m-faq-02__description { margin-top: 0.5em; } .m-faq-02 .m-faq-02__description:before { color: var(--color-answer); content: "A"; left: 0.1em; top: 0.1em; } .m-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media only screen and (max-width: 959.98px) { .m-flex { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (min-width: 960px) { .m-flex { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 30px; } } .m-flex--left .m-flex__image { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .m-flex--left .m-flex__content { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .m-flex__image { border-radius: 5px; overflow: hidden; } @media only screen and (min-width: 960px) { .m-flex__image { max-width: 300px; } .m-flex__image img { width: 100%; } } .m-flex__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .m-flex__content > * + * { margin-top: 1em; } .m-flow { background-color: var(--color-gray-01); padding: 1rem 20px; width: 100%; } .m-flow__lists { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--color-gray-01); counter-reset: li; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; font-size: var(--fontSize-responsive__s); margin-left: auto; margin-right: auto; max-width: var(--device-width-pc-wrap); } .m-flow__item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--color-font__note); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-left: 1em; padding-left: 2rem; position: relative; } .m-flow__item.is-active { color: var(--color-black); } .m-flow__item.is-active:before { background: var(--color-bg__gray__darkest); } @media only screen and (min-width: 960px) { .m-flow__item { margin-left: 2em; } } .m-flow__item:first-child { margin-left: 0; } .m-flow__item:before { background: var(--color-bg__gray__darker); border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; color: #fff; content: counter(li) ""; counter-increment: li; display: block; font-family: arial; font-size: 1rem; font-weight: bold; height: 1.5rem; left: 0; position: absolute; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1.5rem; } .m-flow__item .m-icon, .m-flow__item .m-form-error .is-error:before, .m-form-error .m-flow__item .is-error:before { margin-left: 1em; } @media only screen and (min-width: 960px) { .m-flow__item .m-icon, .m-flow__item .m-form-error .is-error:before, .m-form-error .m-flow__item .is-error:before { margin-left: 2em; } } .m-form { border: 2px solid var(--color-border__gray); } .m-form-note { color: var(--color-font__note); font-size: var(--fontSize-s); margin-top: 0.5em; } .m-form-error .is-error { color: var(--color-state__error); margin-top: 5px; padding-left: 1.5em; position: relative; } .m-form-error .is-error:before { left: 0; position: absolute; top: 0.3em; } .m-form-blocks { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1em 0; width: 100%; } .m-form-blocks + .m-form-blocks { margin-top: 2em; } @media only screen and (max-width: 959.98px) { .m-form-blocks .m-grid { gap: 1em; } } .m-form-blocks--inline { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1em; } .m-form-blocks--inline .m-form-block { width: auto; } @media only screen and (min-width: 960px) { .m-form-blocks--inline { gap: 2em; } } .m-form-blocks__title { font-weight: bold; } .m-form-blocks__title + .m-form-block { margin-top: 2em; } .m-form-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .m-form-block__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; } .m-form-block__header__title { font-size: var(--fontSize-h4); font-weight: bold; } .m-form-block__header .m-list--notice { margin-top: 0; } .m-form-block__label { color: var(--color-font__note); font-size: var(--fontSize-s); margin-bottom: 0.25rem; white-space: nowrap; } .m-form-block--inline { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0.5em; } .m-form-block--inline .m-form-block__label { color: var(--color-font__base); margin: 0; } .m-form-text { margin: 10px 0; } .m-form-input::-webkit-input-placeholder, .m-form-textarea::-webkit-input-placeholder { color: var(--color-font__note); } .m-form-input::-moz-placeholder, .m-form-textarea::-moz-placeholder { color: var(--color-font__note); } .m-form-input:-ms-input-placeholder, .m-form-textarea:-ms-input-placeholder { color: var(--color-font__note); } .m-form-input::-ms-input-placeholder, .m-form-textarea::-ms-input-placeholder { color: var(--color-font__note); } .m-form-input::placeholder, .m-form-textarea::placeholder { color: var(--color-font__note); } .m-form-input, .m-form-textarea, .m-form-select { background-color: #fff; border: 2px solid var(--color-border__gray__light); border-radius: var(--radius); font-size: 1rem; padding: 0.5em 0.75em; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%; } @media (hover: hover) { .m-form-input:hover, .m-form-textarea:hover, .m-form-select:hover { border-color: var(--color-border__gray__darkest); } } .m-form-input:focus, .m-form-textarea:focus, .m-form-select:focus { border-color: var(--color-border__gray__darkest); } .is-error .m-form-input, .m-form-input.is-error, .is-error .m-form-textarea, .m-form-textarea.is-error, .is-error .m-form-select, .m-form-select.is-error { background-color: var(--color-state__error__light); border-color: var(--color-state__error); } .m-form-select { padding: 0; position: relative; z-index: 1; } .m-form-select select { padding: 0.5em 1.75em 0.5em 0.75em; width: 100%; color: var(--color-font__note); } .m-form-select select:invalid { color: var(--color-font__note); } .m-form-select select:user-valid { color: var(--color-font__dark); } .m-form-select select option:disabled { color: var(--color-font__note); } .m-form-select::after { border-bottom: 2px solid var(--color-border__gray__light); border-right: 2px solid var(--color-border__gray__light); content: ""; height: 8px; position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); width: 8px; z-index: -1; } @media (hover: hover) { .m-form-select:hover::after { border-color: var(--color-border__gray__darkest); } } .m-form-select:focus::after { border-color: var(--color-border__gray__darkest); } .m-form-radio { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 1px; opacity: 0; position: absolute; width: 1px; } .m-form-radio[aria-invalid=true], .m-form-radio.is-error + label { background-color: var(--color-state__error__light); border-color: var(--color-state__error); } .m-form-radio.is-error[aria-invalid=false] + label, .m-form-radio + label { background-color: #fff; border: 2px solid var(--color-border__gray__light); border-radius: var(--radius); display: block; font-size: 1rem; line-height: 1.2; padding: 0.7em 1em 0.7em 1.75em; position: relative; text-align: left; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .m-form-radio.is-error[aria-invalid=false] + label:before, .m-form-radio.is-error[aria-invalid=false] + label:after, .m-form-radio + label:before, .m-form-radio + label:after { border: 2px solid var(--color-border__gray__light); border-radius: 100%; content: ""; left: 0.5em; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .m-form-radio.is-error[aria-invalid=false] + label:before, .m-form-radio + label:before { height: 1em; width: 1em; } .m-form-radio.is-error[aria-invalid=false] + label:after, .m-form-radio + label:after { height: 0.45em; opacity: 0; -webkit-transform: translateY(-50%) translateX(calc(50% + 1px)); transform: translateY(-50%) translateX(calc(50% + 1px)); width: 0.45em; } @media (hover: hover) { .m-form-radio:hover + label { border-color: var(--color-border__gray__darkest); } .m-form-radio:hover + label:before, .m-form-radio:hover + label:after { border-color: var(--color-border__gray__darkest); } } .m-form-radio:focus + label { border-color: var(--color-border__gray__darkest); } .m-form-radio:focus + label:before, .m-form-radio:focus + label:after { border-color: var(--color-border__gray__darkest); } .m-form-radio.is-error[aria-invalid=false]:checked + label, .m-form-radio:checked + label { background: var(--color-state__active); border-color: var(--color-border__gray__darkest); } .m-form-radio.is-error[aria-invalid=false]:checked + label:before, .m-form-radio.is-error[aria-invalid=false]:checked + label:after, .m-form-radio:checked + label:before, .m-form-radio:checked + label:after { border-color: var(--color-border__gray__darkest); } .m-form-radio.is-error[aria-invalid=false]:checked + label:after, .m-form-radio:checked + label:after { background: var(--color-border__gray__darkest); opacity: 1 !important; } .m-form-checkbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 1px; opacity: 0; position: absolute; width: 1px; } .m-form-checkbox[aria-invalid=true] + label, .m-form-checkbox.is-error + label { background-color: var(--color-state__error__light); border-color: var(--color-state__error); } .m-form-checkbox[aria-invalid=true] + label:before, .m-form-checkbox.is-error + label:before { border-color: var(--color-state__error); } .m-form-checkbox.is-error[aria-invalid=false] + label, .m-form-checkbox + label { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; border: 2px solid var(--color-border__gray__light); border-radius: var(--radius); display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1rem; height: 100%; line-height: 1.2; padding: 0.7em 1em 0.7em 1.75em; position: relative; text-align: left; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .m-form-checkbox.is-error[aria-invalid=false] + label:before, .m-form-checkbox.is-error[aria-invalid=false] + label:after, .m-form-checkbox + label:before, .m-form-checkbox + label:after { content: ""; position: absolute; top: 50%; } .m-form-checkbox.is-error[aria-invalid=false] + label:before, .m-form-checkbox + label:before { border: 2px solid var(--color-border__gray__light); border-radius: var(--radius); height: 1em; left: 0.5em; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1em; } .m-form-checkbox.is-error[aria-invalid=false] + label:after, .m-form-checkbox + label:after { border-bottom: 2px solid #fff; border-right: 2px solid #fff; display: block; height: 0.6em; left: calc(0.5em + 5px); opacity: 0; opacity: 0; -webkit-transform: rotate(45deg) translateY(-50%) translateX(calc(-50% - 1px)); transform: rotate(45deg) translateY(-50%) translateX(calc(-50% - 1px)); width: 0.4em; } @media (hover: hover) { .m-form-checkbox:hover + label { border-color: var(--color-border__gray__darkest); } .m-form-checkbox:hover + label:before { border-color: var(--color-border__gray__darkest); } } .m-form-checkbox:focus + label { border-color: var(--color-border__gray__darkest); } .m-form-checkbox:focus + label:before { border-color: var(--color-border__gray__darkest); } .m-form-checkbox.is-error[aria-invalid=false]:checked + label, .m-form-checkbox:checked + label { background: var(--color-state__active); border-color: var(--color-border__gray__darkest); } .m-form-checkbox.is-error[aria-invalid=false]:checked + label:before, .m-form-checkbox:checked + label:before { background: var(--color-border__gray__darkest); border-color: var(--color-border__gray__darkest); } .m-form-checkbox.is-error[aria-invalid=false]:checked + label:after, .m-form-checkbox:checked + label:after { opacity: 1; } .is-error .m-form-consent .m-form-checkbox + label { background-color: var(--color-state__error__light); border-color: var(--color-state__error); } .is-error .m-form-consent .m-form-checkbox + label:before { border-color: var(--color-state__error); } .m-form-consent .m-form-checkbox + label { background: none; border: none; } .m-form-consent .m-form-checkbox + label:before { left: 0; } .m-form-consent .m-form-checkbox + label:after { left: 5px; } .m-form-consent .m-form-checkbox:hover + label, .m-form-consent .m-form-checkbox:focus + label { background: none; border: none; } .m-form-consent .m-form-checkbox:hover + label:before, .m-form-consent .m-form-checkbox:focus + label:before { border-color: var(--color-border__gray__darkest); } .m-form-consent .m-form-checkbox:checked + label { background: none; border: none; } .m-form-consent .m-form-checkbox:checked + label:before { background: var(--color-border__gray__darkest); border-color: var(--color-border__gray__darkest); } .m-form-consent .m-form-checkbox:checked + label:after { opacity: 1; } .m-form-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; } .m-form-toggle label { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 100%; } .m-form-toggle label:first-child .m-form-toggle__text { border-bottom-left-radius: var(--radius); border-right-color: transparent; border-top-left-radius: var(--radius); } .m-form-toggle label:last-child .m-form-toggle__text { border-bottom-right-radius: var(--radius); border-left-color: transparent; border-top-right-radius: var(--radius); } .m-form-toggle--col2 label { width: 50%; } .m-form-toggle [type=radio] { height: 100%; margin: 0; padding: 0; position: absolute; width: 100%; } .m-form-toggle [type=radio]:disabled + .m-form-toggle__text { background-color: var(--color-state__disable__bg); color: var(--color-state__disable); cursor: not-allowed; } .m-form-toggle [type=radio]:checked + .m-form-toggle__text { background-color: var(--color-state__active); border-color: var(--color-border__gray); font-weight: bold; } .m-form-toggle__text { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; border: 2px solid var(--color-border__gray__light); color: var(--color-black); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0.5em 1em; text-align: center; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%; z-index: 1; } @media (hover: hover) { .m-form-toggle__text:hover { background-color: var(--color-state__active); } } .m-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; } @media only screen and (max-width: 959.98px) { .m-grid.--vgap-2 { gap: 2em; } } @media only screen and (max-width: 959.98px) { .m-grid.--vgap-3 { gap: 3em; } } .m-grid--masonry { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 40px; height: 100vw; } .m-grid--masonry .m-grid__col { width: 100%; } @media only screen and (min-width: 960px) { .m-grid--masonry .m-grid__col { width: calc(50% - 20px); } } @media only screen and (min-width: 960px) { .m-grid--1 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .m-grid--1 .m-grid__col { width: auto; } @media only screen and (min-width: 960px) { .m-grid--1to2 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .m-grid--1to2 .m-grid__col, .m-grid--1to2 > li { width: 100%; } @media only screen and (min-width: 960px) { .m-grid--1to2 .m-grid__col, .m-grid--1to2 > li { width: calc(50% - 10px); } } @media only screen and (min-width: 960px) { .m-grid--1to2.--wide { gap: 40px; } } @media only screen and (min-width: 960px) { .m-grid--1to2.--wide .m-grid__col { width: calc(50% - 20px); } } @media only screen and (min-width: 960px) { .m-grid--1to3 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 960px) { .m-grid--1to3:after { content: ""; display: block; width: calc(33.3333333333% - 13.3333333333px); } } .m-grid--1to3 .m-grid__col { width: 100%; } @media only screen and (min-width: 960px) { .m-grid--1to3 .m-grid__col { width: calc(33.3333333333% - 13.3333333333px); } } @media only screen and (min-width: 960px) { .m-grid--1to4 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 960px) { .m-grid--1to4:after { content: ""; display: block; width: calc(25% - 15px); } } .m-grid--1to4 .m-grid__col { width: 100%; } @media only screen and (min-width: 960px) { .m-grid--1to4 .m-grid__col { width: calc(25% - 15px); } } .m-grid--2 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 30px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 960px) { .m-grid--2 { gap: 40px; } } .m-grid--2 .m-grid__col { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(50% - 20px); } .m-grid--2to3 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 30px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 960px) { .m-grid--2to3 { gap: 20px; } } @media only screen and (min-width: 960px) { .m-grid--2to3:after { content: ""; display: block; width: calc((100% - 40px) / 3); } } .m-grid--2to3 .m-grid__col { width: calc((100% - 1rem) / 2); } @media only screen and (min-width: 960px) { .m-grid--2to3 .m-grid__col { width: calc((100% - 40px) / 3); } } .m-grid--form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px 0; } .m-grid--form__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 20px 0; } @media only screen and (min-width: 960px) { .m-grid--form__content { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0 50px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .m-grid--form__content--1col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .m-grid--form__content__header .m-hdg { margin: 0; } .m-grid--form__content__header .m-label { margin-left: 0.5em; } @media only screen and (min-width: 960px) { .m-grid--form__content__header { width: 280px; } .m-grid--form__content__header .m-hdg3 { line-height: 1.4; } } .m-grid--form__content__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .m-grid--form__footer { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px 0; padding-left: 20px; padding-right: 20px; } .m-grid--form__footer .m-btn--back { max-width: calc(100% - 40px); } @media only screen and (min-width: 960px) { .m-grid--form__footer { gap: 30px 0; } .m-grid--form__footer .m-btn { max-width: 400px; } .m-grid--form__footer .m-btn--back { max-width: 360px; } } .m-image { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(var(--fontSize-s) / 2); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .m-image img { border-radius: var(--radius); -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; } .m-image--center { text-align: center; } .m-image--full img { height: auto; width: 100%; } .m-image__caption { color: var(--color-font__light); display: block; font-size: var(--fontSize-s); text-align: center; } @media (hover: hover) { a.m-image:hover img, button.m-image:hover img { opacity: 0.6; } } .m-label { background: #fff; border: 1px solid var(--color-border__gray__darkest); border-radius: var(--radius); color: var(--color-font__light); display: inline-block; font-size: var(--fontSize-s); padding: 0.3em 0.8em; text-decoration: none; vertical-align: baseline; } .m-label-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.5em; } .m-label--require { border-color: var(--color-require); border-width: 2px; color: var(--color-require); } .m-label--option { border-color: var(--color-font__note); color: var(--color-font__note); } .m-label--bicycle { border-color: var(--color-bicycle); } .m-label--gan { border-color: var(--color-gan); } .m-label--iryo { border-color: var(--color-iryo); } .m-label--juniornisa { border-color: var(--color-juniornisa); } .m-label--kikin { border-color: var(--color-kikin); } .m-label--episode { border-color: var(--color-episode); } .m-label--seimei { border-color: var(--color-seimei); } .m-label--songai { border-color: var(--color-songai); } .m-label--literacy { border-color: var(--color-literacy); } .m-label--mortgage { border-color: var(--color-mortgage); } .m-label--nisa { border-color: var(--color-nisa); } a.m-label, button.m-label { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } a.m-label.is-active, button.m-label.is-active { background-color: var(--color-bg__gray__darker); color: #fff; text-decoration: none; } @media (hover: hover) { a.m-label:hover, button.m-label:hover { background-color: var(--color-bg__gray__darker); color: #fff; text-decoration: none; } } @media (hover: hover) { a.m-label--bicycle:hover, button.m-label--bicycle:hover { background-color: var(--color-bicycle); } a.m-label--gan:hover, button.m-label--gan:hover { background-color: var(--color-gan); } a.m-label--iryo:hover, button.m-label--iryo:hover { background-color: var(--color-iryo); } a.m-label--juniornisa:hover, button.m-label--juniornisa:hover { background-color: var(--color-juniornisa); } a.m-label--kikin:hover, button.m-label--kikin:hover { background-color: var(--color-kikin); } a.m-label--episode:hover, button.m-label--episode:hover { background-color: var(--color-episode); } a.m-label--seimei:hover, button.m-label--seimei:hover { background-color: var(--color-seimei); } a.m-label--songai:hover, button.m-label--songai:hover { background-color: var(--color-songai); } a.m-label--literacy:hover, button.m-label--literacy:hover { background-color: var(--color-literacy); } a.m-label--mortgage:hover, button.m-label--mortgage:hover { background-color: var(--color-mortgage); } a.m-label--nisa:hover, button.m-label--nisa:hover { background-color: var(--color-nisa); } } .m-link { color: var(--color-link); display: inline-block; text-decoration: none; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media (hover: hover) { .m-link:hover { text-decoration: underline; } .m-link:hover .m-icon--arrow-circle:before { -webkit-transform: translateX(2px); transform: translateX(2px); } } .m-link .m-icon, .m-link .m-form-error .is-error:before, .m-form-error .m-link .is-error:before { color: var(--color-font__light); margin-left: 0.5em; } .m-link__text { color: var(--color-link); -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .m-link--back .m-icon--arrow-circle { margin-left: 0; margin-right: 0.5em; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } @media (hover: hover) { .m-link--back:hover .m-icon--arrow-circle:before { -webkit-transform: translateX(2px); transform: translateX(2px); } } .m-link--anchor .m-icon--arrow-circle { -webkit-transform: rotate(90deg); transform: rotate(90deg); } @media (hover: hover) { .m-link--anchor:hover .m-icon--arrow-circle:before { -webkit-transform: translateX(2px); transform: translateX(2px); } } .m-link--top .m-icon--arrow-circle { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } @media (hover: hover) { .m-link--top:hover .m-icon--arrow-circle:before { -webkit-transform: translateX(2px); transform: translateX(2px); } } .m-link--end { font-size: var(--fontSize-s); padding-left: 2em; text-align: right; } @media only screen and (min-width: 960px) { .m-link--end { font-size: var(--fontSize-base); } } .m-link--end.is-active { display: none; } .m-list { list-style: none; } .m-list.m-grid > li { margin: 0; } .m-list > li { line-height: 1.4; margin-top: 0.5em; } .m-list > li:first-child { margin-top: 0; } .m-list > li > .m-list { margin-top: 0.25em; } .m-list--notice { color: var(--color-font__dark); font-size: var(--fontSize-notice); } * + .m-list--notice { margin-top: 1em; } .m-list--notice li { padding-left: 1.3em; position: relative; } .m-list--notice .mark { left: 0; position: absolute; top: 0; } .m-list--notice--num li { padding-left: 2.2em; } .m-list--inline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.5em 1em; } .m-list--inline > li { margin: 0; } .m-list--inline > li > a { display: block; } .m-list--bullet > li { padding-left: 1.5em; position: relative; } .m-list--bullet > li:before { background: #000; border-radius: 50%; content: ""; display: block; height: 6px; left: 0.2em; position: absolute; top: 0.55em; width: 6px; } .m-list--alpha > li { counter-increment: count-alpha; padding-left: 1.3em; position: relative; } .m-list--alpha > li:before { content: counter(count-alpha, lower-alpha) "."; left: 0; position: absolute; top: 0; } .m-list--number > li { counter-increment: count-number; padding-left: 1.7em; position: relative; } .m-list--number > li:before { content: counter(count-number); font-weight: bold; left: 0; position: absolute; text-align: right; top: 0.05em; width: 1.2em; } .m-list--flow { counter-reset: item; list-style-type: none; } .m-list--flow > li { margin-bottom: 10px; padding-bottom: 15px; position: relative; } @media only screen and (min-width: 960px) { .m-list--flow > li { padding-bottom: 30px; } } .m-list--flow > li:after { border-color: var(--color-key) transparent transparent transparent; border-style: solid; border-width: 15px 20px 0 20px; bottom: 0; content: ""; height: 0; left: 50%; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; } @media only screen and (min-width: 960px) { .m-list--flow > li:after { border-width: 30px 40px 0 40px; } } .m-list--flow > li:last-child { margin-bottom: 0; padding-bottom: 0; } .m-list--flow > li:last-child:after { border: none; } .m-list--order-01 li { counter-increment: li; font-weight: bold; margin-top: 1rem; padding-left: 2rem; position: relative; } .m-list--order-01 li:first-child { margin-top: 0; } .m-list--order-01 li:before { background: var(--color-key); border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; color: #fff; content: counter(li) ""; display: block; font-family: arial; font-size: 1rem; font-weight: bold; height: 1.5rem; left: 0; left: 0; line-height: 1.6rem; position: absolute; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1.5rem; } .m-list--anchor { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: var(--fontSize-s); gap: 1em; } @media only screen and (min-width: 960px) { .m-list--anchor { font-size: var(--fontSize-base); } } .m-list--anchor > li { border-right: 1px solid var(--color-border__gray__light); margin: 0; padding-right: 12px; } @media only screen and (min-width: 960px) { .m-list--anchor > li { padding-right: 16px; } } .m-list--anchor > li:last-child { border-right: none; padding-right: 12px; } .m-list--comments li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 1rem; } .m-list--comments li:first-child { margin-top: 0; } .m-list--comments li:nth-child(2n) { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .m-list--comments__icon { padding-right: 15px; width: 45px; } @media only screen and (min-width: 960px) { .m-list--comments__icon { padding-right: 32px; width: 80px; } } li:nth-child(2n) .m-list--comments__icon { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-left: 15px; padding-right: 0; } @media only screen and (min-width: 960px) { li:nth-child(2n) .m-list--comments__icon { padding-left: 32px; } } .m-list--comments__content { background: #FAFAFA; border: 1px solid #E6E6E6; border-radius: 5px; -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; padding: 15px; position: relative; } @media only screen and (min-width: 960px) { .m-list--comments__content { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 20px; width: calc(100% - 160px); } } .m-list--comments__content > *:last-child { margin-bottom: 0; } .m-list--comments__content:before, .m-list--comments__content:after { border: 10px solid transparent; border-right-color: #E6E6E6; content: ""; display: inline-block; height: 0; left: -21px; position: absolute; top: 15px; width: 0; } .m-list--comments__content:after { border-right-color: #FAFAFA; left: -20px; } li:nth-child(2n) .m-list--comments__content { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } li:nth-child(2n) .m-list--comments__content:before, li:nth-child(2n) .m-list--comments__content:after { left: auto; right: -21px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } li:nth-child(2n) .m-list--comments__content:after { right: -20px; } .m-blockquote { padding-left: 2rem; position: relative; } .m-blockquote .m-icon--doublequotation { color: var(--color-font__light); font-size: 1.5rem; left: 0; position: absolute; top: 0.15rem; } .m-box { background-color: #fff; border-radius: var(--radius); padding: 1em; } .m-box--primary { background-color: #fff; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); overflow: hidden; padding: 0; } .m-box--primary__header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--color-key); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 1em; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0.5rem 1rem; } .m-box--primary__header__icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #fff; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: var(--fontSize-h1); height: 1.5em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 1.5em; } .m-box--primary__header__icon .m-icon, .m-box--primary__header__icon .m-form-error .is-error:before, .m-form-error .m-box--primary__header__icon .is-error:before { color: var(--color-key); } .m-box--primary__header__icon .m-icon--online { padding-left: 2px; } .m-box--primary__header__title { color: #fff; font-size: var(--fontSize-h3); font-weight: bold; } .m-box--primary__body { color: var(--color-font__dark); padding: 1rem; } .m-box--primary__body > * + * { margin-top: 2em; } .m-box--info { background-color: var(--color-bg__gray__lighter); } .m-box--outline { background: #F4F4F4; border-radius: 5px; margin-left: -20px; margin-right: -20px; margin-top: 50px; padding: 20px; } @media only screen and (min-width: 960px) { .m-box--outline { margin-left: 0; margin-right: 0; margin-top: 60px; padding: 30px; } } .m-box--outline .m-box__head { font-weight: bold; margin-bottom: 15px; } @media only screen and (min-width: 960px) { .m-box--outline .m-box__head { margin-bottom: 20px; } } .m-box--outline .m-box__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } .m-box--outline .m-box__list > li { font-size: var(--fontSize-s); } @media only screen and (min-width: 960px) { .m-box--outline .m-box__list > li { font-size: var(--fontSize-base); } } .m-box--block { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; background-color: #fff; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); box-shadow: 0 0 5px rgba(0, 0, 0, 0.35); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; overflow: hidden; padding: 0; } .m-box--block__header { background-color: #fff; padding: 1rem; } .m-box--block__body { background: var(--color-bg__gray__lighter); border-top: 1px solid var(--color-border__gray__light); color: var(--color-font__dark); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: var(--fontSize-s); padding: 1rem; } .m-box--block__body > * + * { margin-top: 1em; } .m-box--important { background: #fff; border: 2px solid var(--color-key); border-radius: var(--radius); color: var(--color-key); font-weight: bold; padding: 12px 20px; } .m-box--important .m-box__head { margin-bottom: 10px; } .m-box--important p { font-size: var(--fontSize-s); } .m-box--important > *:last-child { margin-bottom: 0; } @media only screen and (min-width: 960px) { .m-box--important { padding: 25px 30px; } } .m-btn { cursor: pointer; display: block; line-height: 1.2; margin-left: auto; margin-right: auto; max-width: 600px; padding: 0.5em 2.5rem; position: relative; text-align: center; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%; } .m-btn-group { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 2rem auto; max-width: 400px; width: 100%; } @media (hover: hover) { .m-btn:hover { cursor: pointer; opacity: 0.6; text-decoration: none; } } .m-btn:disabled, .m-btn.is-disabled { background: var(--color-state__disable__bg) !important; border-color: var(--color-state__disable__bg) !important; color: var(--color-state__disable) !important; pointer-events: none !important; } .m-btn:disabled .m-icon--arrow, .m-btn.is-disabled .m-icon--arrow { visibility: hidden; } .m-btn .m-icon, .m-btn .m-form-error .is-error:before, .m-form-error .m-btn .is-error:before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .m-btn .m-icon--blank, .m-btn .m-icon--arrow, .m-btn .m-icon--plus, .m-btn .m-icon--toggle-plus-circle { right: 1rem; } .m-btn .m-icon--arrow { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media (hover: hover) { .m-btn:hover .m-icon--arrow { -webkit-transform: translateX(3px) translateY(-50%); transform: translateX(3px) translateY(-50%); } } .m-btn__free, .m-btn .m-icon--pin, .m-btn .m-icon--tel { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.5rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 1rem; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .m-btn__free { height: 2.5rem; left: 3px; width: 2.5rem; } .m-btn .m-icon--tel { font-size: 1.75rem; } .m-btn small { display: block; font-size: var(--fontSize-s); font-weight: normal; } .m-btn__free { background-color: #fff; border-radius: 50%; color: var(--color-key); font-size: var(--fontSize-s); } .m-btn-link { color: var(--color-link); display: inline; vertical-align: baseline; } @media (hover: hover) { .m-btn-link:hover { text-decoration: underline; } } .m-btn--submit, .m-btn--primary, .m-btn--primary-border, .m-btn--secondary { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: var(--color-key) solid 2px; border-radius: 10em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: var(--fontSize-base); font-weight: bold; gap: 5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 3rem; } .m-btn--submit small, .m-btn--primary small, .m-btn--primary-border small, .m-btn--secondary small { display: block; } .m-btn--primary, .m-btn--submit { background: var(--color-key); border: var(--color-key) solid 2px; border-radius: 10em; color: #fff; font-weight: bold; text-align: center; } .m-btn--secondary { background-color: #fff; border: var(--color-key) solid 2px; border-color: var(--color-border__gray__darkest); color: var(--color-black); } .m-btn--secondary .m-icon--tel, .m-btn--secondary .m-icon--plus { color: var(--color-font__light); } .m-btn--secondary .m-icon--arrow { color: var(--color-font__dark); } .m-btn--primary { background-color: var(--color-key); color: #fff; } .m-btn--primary-border { background-color: #fff; border-color: var(--color-key); color: var(--color-black); } .m-btn--primary-border .m-icon, .m-btn--primary-border .m-form-error .is-error:before, .m-form-error .m-btn--primary-border .is-error:before { color: var(--color-key); } .m-btn--primary-border .m-icon--tel { color: var(--color-font__light); } .m-btn--back { color: var(--color-link); font-size: var(--font-size-s); padding: 1em 1.5em; text-align: center; text-decoration: underline; } @media (hover: hover) { .m-btn--back:hover { border-color: var(--color-border__gray__dark); text-decoration: none; } .m-btn--back:hover .m-icon--arrow-circle { -webkit-transform: translateX(-3px) translateY(-50%); transform: translateX(-3px) translateY(-50%); } } .m-btn--back .m-icon--arrow-circle { margin-right: 0.5em; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .m-btn--tel { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--color-black); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: var(--fontSize-h2); font-weight: bold; gap: 5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 3.5rem; } @media only screen and (max-width: 959.98px) { .m-btn--tel { background-color: #fff; border: var(--color-key) solid 2px; border-radius: 10em; font-size: var(--fontSize-h3); gap: 3px; } } .m-btn--tel small { font-size: var(--fontSize-responsive__s); -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } @media only screen and (min-width: 960px) { .m-btn--tel small { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media only screen and (min-width: 960px) { .m-btn--tel .m-icon--tel { display: none; } } @media only screen and (max-width: 959.98px) { .m-btn--tel-primary { border-color: var(--color-key); } } .m-btn--tel-primary .m-icon--tel { color: var(--color-font__light); } .m-hdg { font-weight: bold; line-height: 1.5; margin-bottom: 1em; } .m-hdg-panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 30px; min-height: 35vh; padding: 15vh 20px 20px 20px; position: relative; z-index: 1; } @media only screen and (min-width: 960px) { .m-hdg-panel { height: 400px; margin-bottom: 40px; min-height: auto; padding-bottom: 60px; } } .m-hdg-panel__title { margin: 0 auto; max-width: var(--device-width-pc); position: relative; width: 100%; z-index: 2; } .m-hdg-panel__title__text, .m-hdg-panel__title__sub-text { background: rgba(255, 255, 255, 0.85); -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; font-weight: bold; line-height: 2.3; padding: 0.25em; } @media only screen and (min-width: 960px) { .m-hdg-panel__title__text, .m-hdg-panel__title__sub-text { padding-left: 0.5em; padding-right: 0.5em; } } .m-hdg-panel__title__text { font-size: var(--fontSize-h2); } @media only screen and (min-width: 960px) { .m-hdg-panel__title__text { font-size: var(--fontSize-h1); } } .m-hdg-panel__title__sub-text { background: rgba(255, 255, 255, 0.85); font-size: var(--fontSize-h4); line-height: 2.3; } @media only screen and (min-width: 960px) { .m-hdg-panel__title__sub-text { font-size: var(--fontSize-h2); } } .m-hdg-panel__bg { height: 100%; left: 0; margin: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: 1; } @media only screen and (min-width: 960px) { .m-hdg-panel__bg { height: 400px; } } .m-hdg-panel__bg img { height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } @media only screen and (min-width: 960px) { .p-thanksletter .m-hdg-panel__bg img { object-position: 0 35%; } } .m-hdg1 { border-bottom: 1px solid var(--color-border__key); font-size: var(--fontSize-h1); line-height: 1.4; padding: 1em 20px; text-align: center; } @media only screen and (min-width: 960px) { .m-hdg1 { line-height: 1.5; padding-left: 0; padding-right: 0; } } .m-hdg2 { border-bottom: 1px solid var(--color-border__gray__light); font-size: var(--fontSize-h2); line-height: 1.3; margin-left: -20px; margin-right: -20px; padding: 0 20px 10px; } @media only screen and (min-width: 960px) { .m-hdg2 { line-height: 1.5; margin-left: 0; margin-right: 0; padding: 0 0 10px; } } .m-hdg2__number { display: inline-block; float: right; font-size: var(--fontSize-s); font-weight: normal; margin-left: 20px; position: relative; top: 8px; } @media only screen and (min-width: 960px) { .m-hdg2__number { float: inherit; top: -3px; } } .m-hdg3 { font-size: var(--fontSize-h3); padding: 10px 0 10px 0.75em; position: relative; } .m-hdg3:before { background: var(--color-border__gray__dark); border: 1px solid var(--color-border__gray__dark); border-radius: 2px; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 4px; } .m-hdg4 { font-size: var(--fontSize-h4); } .m-hdg5 { font-size: var(--fontSize-h5); } .m-media { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(var(--fontSize-s) / 2); width: 100%; } .m-media__image, .m-media__diagram { border-radius: 5px; overflow: hidden; text-align: center; } @media only screen and (max-width: 959.98px) { .m-media__image img, .m-media__diagram img { height: 100%; width: 100%; } } .m-media__caption { color: var(--color-font__light); display: block; font-size: var(--fontSize-s); text-align: center; } .m-media__caption .m-icon, .m-media__caption .m-form-error .is-error:before, .m-form-error .m-media__caption .is-error:before { font-size: 1.3em; margin-left: 0.25em; position: relative; top: 0.02em; } .m-media__body { color: var(--color-black); padding: 15px 20px 20px; width: 100%; } .m-media--block { border: 1px solid var(--color-border__gray__light); border-radius: 5px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); overflow: hidden; } .m-media--block .m-media__image { border-radius: 0; width: 100%; } .m-media--block .m-media__image img { max-width: inherit; width: 100%; } a.m-media .m-media__image img, button.m-media .m-media__image img { -o-object-fit: cover; object-fit: cover; } @media (hover: hover) { a.m-media, button.m-media { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } a.m-media .m-media__image img, button.m-media .m-media__image img { -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } a.m-media:hover, button.m-media:hover { opacity: 0.6; text-decoration: none; } a.m-media:hover .m-media__image img, button.m-media:hover .m-media__image img { -webkit-transform: scale(1.05) rotate(0.1deg); transform: scale(1.05) rotate(0.1deg); } a.m-media:hover .m-media__caption, button.m-media:hover .m-media__caption { text-decoration: underline; } } @media (hover: hover) { a.m-media--block:hover { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); } a.m-media--block:hover .m-link { text-decoration: underline; } a.m-media--block:hover .m-link .m-icon--arrow-circle:before { -webkit-transform: translateX(2px); transform: translateX(2px); } } @media only screen and (min-width: 960px) { .m-grid__col .m-media--block { height: 100%; } } .m-message { background-color: var(--color-bg__gray__lighter); border-radius: var(--radius); color: var(--color-font__dark); font-size: var(--fontSize-notice); margin: 20px 0; padding: 1em; } .m-message__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .m-message__title { font-size: var(--fontSize-base); font-weight: bold; margin-bottom: 0.5em; } .m-message__text { font-size: var(--fontSize-notice); } .m-message--error { color: var(--color-state__error); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; font-size: var(--fontSize-base); font-weight: bold; gap: 1em; } .m-message--error .m-icon--error, .m-message--error .m-form-error .is-error:before, .m-form-error .m-message--error .is-error:before { font-size: 1.5em; margin-top: 0.1em; } .m-message--error a[href*="tel:"] { display: inline-block; font-size: var(--fontSize-h2); } @media only screen and (min-width: 960px) { .m-message--error a[href*="tel:"] { color: var(--color-black); } } .m-message--error--small { background: #fff; font-size: var(--fontSize-s); font-weight: normal; padding: 0; } .m-message--error--small .m-icon--error, .m-message--error--small .m-form-error .is-error:before, .m-form-error .m-message--error--small .is-error:before { font-size: 1.25em; margin-top: 0.2em; } .m-message--attention { background-color: #fff; border: 2px solid var(--color-state__error); color: var(--color-state__error); } .m-note { color: var(--color-font__dark); font-size: var(--fontSize-notice); line-height: 1.4; } * + .m-note { margin-top: 1em; } .m-table-scroll { margin-bottom: 30px; overflow-x: auto; } .m-table-scroll .m-table { margin-bottom: 0; width: 800px; } @media only screen and (min-width: 960px) { .m-table-scroll .m-table { width: 100%; } } .m-table { background: #fff; border: 1px solid var(--color-border__gray__light); margin-bottom: 30px; width: 100%; } .m-table__caption { font-size: var(--fontSize-h4); font-weight: bold; margin-bottom: 0.5em; } .m-table thead th{ background: var(--color-bg__gray__darkest); color: #fff; font-weight: bold; } .m-table thead td { background: var(--color-bg__gray__light); } .m-table tbody tr:nth-child(even) { background: var(--color-bg__gray__lighter); } .m-table tbody tr:last-child th, .m-table tbody tr:last-child td { border-bottom: none; } .m-table tbody tr .m-table__head1 { background: var(--color-bg__gray__darker); color: #fff; font-weight: bold; } .m-table tbody tr .m-table__head2 { background: var(--color-bg__gray__light); color: var(--color-black); font-weight: bold; } .m-table tbody th { background: var(--color-bg__gray); border-color: var(--color-border__gray__lightest); font-weight: bold; } .m-table th, .m-table td { border: 1px solid var(--color-border__gray__light); border-width: 0 1px 1px 0; padding: 10px; text-align: center; vertical-align: middle; } .m-table td p { margin: 0; text-align: left; } .m-hdg2 + .m-profile { border-top: none; padding-top: 0; } .m-profile { border-bottom: 1px solid var(--color-border__gray__light); border-top: 1px solid var(--color-border__gray__light); display: grid; gap: 1rem; grid-template-areas: "image header" "body body"; grid-template-columns: 100px 1fr; grid-template-rows: auto auto; padding: 20px; } @media only screen and (min-width: 960px) { .m-profile { gap: 20px; grid-template-areas: "image header" "image body"; grid-template-columns: 160px 1fr; padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 959.98px) { .m-profile { margin-left: -20px; margin-right: -20px; } } .m-profile + .m-profile { border-top: none; margin-top: 0; padding-top: 20px; } .m-profile__header { font-weight: normal; grid-area: header; } .m-profile__body { grid-area: body; } .m-profile__image { grid-area: image; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; overflow: hidden; } .m-profile__image img { border-radius: 5px; } @media only screen and (max-width: 959.98px) { .m-profile__image { width: 100px; } } .m-profile__name { font-size: var(--fontSize-h4); } .m-profile__credentials { color: var(--color-font__light); font-size: var(--fontSize-s); margin-top: 0.2em; } .m-block-case-01__header { background-color: #fff; display: block; width: 100%; } @media (hover: hover) { .m-block-case-01__header { -webkit-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out; } .m-block-case-01__header:hover { background: var(--color-bg__gray__lighter); } } @media only screen and (min-width: 960px) { .m-block-case-01__header__image { display: none; } } .m-block-case-01__header__image img { width: 100%; } .m-block-case-01__header__trigger { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; } @media only screen and (min-width: 960px) { .m-block-case-01__header__trigger { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .m-block-case-01__header__label .m-label { font-size: var(--fontSize-ss); vertical-align: text-bottom; } @media only screen and (min-width: 960px) { .m-block-case-01__header__label .m-label { font-size: var(--fontSize-s); } } .m-block-case-01__header__text { font-size: var(--fontSize-h4); font-weight: bold; } .m-block-case-01__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 20px; } .m-block-case-01__body__image { width: calc(50% - 10px); } @media only screen and (max-width: 959.98px) { .m-block-case-01__body__image { display: none; } } .m-block-case-01__body__text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .m-block-case-01__advice { background: #fff; padding: 20px; } .m-block-case-01__advice__title { font-weight: bold; } .m-block-cv-01 { background-color: var(--color-bg__cream__light); border-top: 1px solid var(--color-border__gray__light); padding: 30px 20px; width: 100%; } @media only screen and (min-width: 960px) { .m-block-cv-01 { padding-left: 0; padding-right: 0; } } .l-aside--fixed .m-block-cv-01 { padding: 10px; } .l-aside--fixed .m-block-cv-01 .m-block-cv-01__header { display: none; } @media only screen and (max-width: 959.98px) { .l-aside--fixed .m-block-cv-01 .m-btn { font-size: var(--fontSize-s); } } @media only screen and (max-width: 959.98px) { .l-aside--fixed .m-block-cv-01 .m-btn .m-icon--tel { display: none; } } .m-block-cv-01__header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.25rem; margin-bottom: 1.5rem; } .m-block-cv-01__header__title { font-size: var(--fontSize-base); font-weight: bold; } @media only screen and (min-width: 960px) { .m-block-cv-01__header__title { font-size: var(--fontSize-h3); } } .l-aside--fixed .m-block-cv-01__header { margin-bottom: 0.5rem; } .m-block-cv-01__grid { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 960px) { .m-block-cv-01__grid { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0; } } .l-aside--fixed .m-block-cv-01__grid { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .m-block-cv-01__col { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } @media only screen and (min-width: 960px) { .m-block-cv-01__col { border-left: 1px solid var(--color-border__gray__light); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 30px; width: 450px; } .m-block-cv-01__col:first-child { border-left: none; } .m-block-cv-01__col:only-child { gap: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } } @media only screen and (max-width: 959.98px) { .m-block-cv-01__col__header, .m-block-cv-01__col__body { max-width: 400px; width: 100%; } } .m-block-cv-01__col__header { font-size: 1rem; font-weight: bold; text-align: center; } @media only screen and (max-width: 959.98px) { .m-block-cv-01__col__header { display: none; } } @media only screen and (min-width: 960px) { .m-block-cv-01__col__header { text-align: left; } } .m-block-cv-01__col__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-width: 300px; } .m-block-cv-01__tel { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .m-block-cv-01__tel__text { font-size: var(--fontSize-ss); } .m-block-cv-01__tel__tel { font-size: var(--fontSize-h2); font-weight: bold; line-height: 1.2; } .m-block-cv-01__note { color: var(--color-font__note); font-size: var(--fontSize-ss); } .m-block-cv-01__btn-group { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; } @media only screen and (min-width: 960px) { .m-block-cv-01__btn-group { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: auto; } } .m-block-cv-01__btn-group .m-btn { max-width: 500px; } .m-block-cv-02 { background-color: #fff; margin: 0 auto; max-width: var(--device-width-pc); padding: 20px 0 0; } .m-block-cv-02__panel { background-color: #fff; height: 77.8666666667vw; position: relative; z-index: 1; } @media only screen and (min-width: 960px) { .m-block-cv-02__panel { height: 400px; } } .m-block-cv-02__panel__bg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .m-block-cv-02__panel__bg:before { background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(238, 240, 243)), color-stop(30%, rgba(238, 240, 243, 0)), color-stop(70%, rgba(255, 255, 255, 0)), color-stop(90%, rgb(255, 255, 255))); background: -webkit-linear-gradient(bottom, rgb(238, 240, 243) 10%, rgba(238, 240, 243, 0) 30%, rgba(255, 255, 255, 0) 70%, rgb(255, 255, 255) 90%); background: linear-gradient(0deg, rgb(238, 240, 243) 10%, rgba(238, 240, 243, 0) 30%, rgba(255, 255, 255, 0) 70%, rgb(255, 255, 255) 90%); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .m-block-cv-02__panel__bg img { height: 100%; -o-object-fit: contain; object-fit: contain; width: 100%; } .m-block-cv-02__panel__inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto; max-width: var(--device-width-pc); padding-left: 20px; padding-right: 20px; position: relative; z-index: 2; } .m-block-cv-02__panel__header { text-align: center; } .m-block-cv-02__panel .m-btn { max-width: 470px; } @media (hover: hover) { .m-block-cv-02__panel .m-btn--primary:hover { background-color: #e4524f; border-color: #e4524f; opacity: 1; } } .m-block-cv-02__panel__title { font-size: var(--fontSize-h3); font-weight: bold; } .m-block-cv-02__body { background: #EEF0F3; padding: 20px 20px 30px; text-align: center; } .m-block-cv-02 .m-list--notice { color: var(--color-font__lighter); font-size: var(--fontSize-ss); margin-top: 1rem; text-align: left; } @media only screen and (min-width: 960px) { .m-block-cv-02 .m-list--notice { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 30px; } } .m-block-cv-02 .m-link { font-size: var(--fontSize-s); margin-top: 1em; } .m-block-cv-03 { background-color: var(--color-key); border-bottom: 1px solid var(--color-border__gray__light); display: block; margin-left: -20px; margin-right: -20px; margin-top: 60px; padding: 40px 20px 30px; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media (hover: hover) { .m-block-cv-03:hover { cursor: pointer; opacity: 0.6; text-decoration: none; } .m-block-cv-03:hover .m-icon--arrow { -webkit-transform: translateX(3px) translateY(-50%); transform: translateX(3px) translateY(-50%); } } @media only screen and (min-width: 960px) { .m-block-cv-03 { margin-left: 0; margin-right: 0; } } .m-block-cv-03__image { margin: auto; text-align: center; width: 60vw; } @media only screen and (min-width: 960px) { .m-block-cv-03__image { width: 300px; } } .m-block-cv-03__btn { margin: auto; max-width: 600px; width: 100%; } @media only screen and (min-width: 960px) { .m-block-cv-03__btn { width: 400px; } } .m-block-cv-03__btn .m-btn { background-color: #fff; border-color: #fff; color: var(--color-key); } @media (hover: hover) { .m-block-cv-03__btn .m-btn:hover { opacity: 1; } } .m-block-lineup-tab-01__list { border-top: 1px solid var(--color-border__gray__light); margin-bottom: 40px; } .m-block-lineup-tab-01__list:last-child { margin-bottom: 0; } @media only screen and (min-width: 960px) { .m-block-lineup-tab-01__list { border-top: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 30px; } } .m-block-lineup-tab-01__list > li { border-bottom: 1px solid var(--color-border__gray__light); line-height: 1; margin-top: 0; } @media only screen and (min-width: 960px) { .m-block-lineup-tab-01__list > li { width: calc(33.3333333333% - 20px); } } .m-block-lineup-tab-01__list > li > a { color: #000; display: block; font-weight: bold; padding: 17px 20px 17px 20px; position: relative; } @media only screen and (min-width: 960px) { .m-block-lineup-tab-01__list > li > a { padding-left: 0; } } .m-block-lineup-tab-01__list > li > a:before { color: #707070; content: "\e903"; font-family: "icomoon" !important; line-height: 1.2; margin-top: -0.5em; position: absolute; right: 2px; top: 50%; -webkit-transition: 0.2s; transition: 0.2s; } @media (hover: hover) { .m-block-lineup-tab-01__list > li > a:hover { opacity: 0.5; text-decoration: none; } .m-block-lineup-tab-01__list > li > a:hover:before { right: 0; } } .m-block-lineup-tab-01__list > li > a > small { font-size: 12px; font-weight: normal; } .m-block-lineup-tab-01__list > li > span { background: #F4F4F4; color: #999; display: block; font-weight: bold; padding: 17px 20px 17px 20px; } @media only screen and (min-width: 960px) { .m-block-lineup-tab-01__list > li > span { background: #fff; padding-left: 0; } } .m-block-lineup-tab-02 .m-hdg4 { border-top: 1px solid var(--color-border__gray__light); margin-bottom: 20px; margin-top: 20px; padding-top: 20px; } .m-block-lineup-tab-02 .m-list--notice { margin-bottom: 15px; } .m-block-lineup-tab-02__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; } @media only screen and (min-width: 960px) { .m-block-lineup-tab-02__list { margin-bottom: 40px; } } .m-block-lineup-tab-02__list:last-child { margin-bottom: 0; } .m-block-lineup-tab-02__list > li { width: calc(50% - 8px); } .m-block-lineup-tab-02__list > li > a, .m-block-lineup-tab-02__list > li > span { background: #FAFAFA; border-radius: 5px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); color: inherit; display: block; height: 100%; overflow: hidden; } @media (hover: hover) { .m-block-lineup-tab-02__list > li > a { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .m-block-lineup-tab-02__list > li > a:hover { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); opacity: 0.7; text-decoration: none; } .m-block-lineup-tab-02__list > li > a:hover .m-block-lineup-tab-02__list__img img { -webkit-transform: scale(1.05) rotate(0.1deg); transform: scale(1.05) rotate(0.1deg); } } .m-block-lineup-tab-02__list > li > span .m-block-lineup-tab-02__list__txt { color: #999; } @media only screen and (min-width: 960px) { .m-block-lineup-tab-02__list { gap: 20px; } .m-block-lineup-tab-02__list > li { width: calc(25% - 15px); } } .m-block-lineup-tab-02__list__img { background: #fff; text-align: center; } @media (hover: hover) { .m-block-lineup-tab-02__list__img { overflow: hidden; } .m-block-lineup-tab-02__list__img img { -o-object-fit: cover; object-fit: cover; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } } .m-block-lineup-tab-02__list__txt { font-size: 14px; padding: 10px; } @media only screen and (min-width: 960px) { .m-block-lineup-tab-02__list__txt { font-size: 16px; padding: 15px 20px; } } .m-block-lineup-tab-03 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px 0; } @media only screen and (min-width: 960px) { .m-block-lineup-tab-03 { gap: 20px 0; } .m-block-lineup-tab-03__col { border-top: 1px solid var(--color-border__gray__light); overflow: hidden; padding-top: 30px; position: relative; } .m-block-lineup-tab-03__col:first-child { border-top: none; padding-top: 0; } } .m-block-lineup-tab-03 .m-block-lineup-tab-01__list { margin-bottom: 0; } @media only screen and (min-width: 960px) { .m-block-lineup-tab-03 .m-block-lineup-tab-01__list { bottom: -1px; position: relative; } } .m-block-shopsearch__header { margin-bottom: 1em; } .m-block-shopsearch__title { font-size: var(--fontSize-h2); font-weight: bold; text-align: center; } .m-block-shopsearch__title__sub { font-size: var(--fontSize-h5); margin-left: 3em; } @media only screen and (max-width: 959.98px) { .m-block-shopsearch__title__sub { display: block; margin-left: 0; } } .m-block-shopsearch__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media only screen and (min-width: 960px) { .m-block-shopsearch__body { gap: 40px; } } .m-block-shopsearch__form { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; background-color: var(--color-bg__gray__lighter); border-radius: var(--radius); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; height: 100%; padding: 1em; } .m-block-shopsearch__form__title { font-size: var(--fontSize-h4); font-weight: bold; } .m-block-shopsearch__form__body { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .m-block-shopsearch__form__body .m-grid { gap: 10px; } .m-block-shopsearch__form__input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .m-block-shopsearch__form__submit { width: 5rem; } .m-block-shopsearch__form__submit .m-btn { padding-left: 1rem; padding-right: 1rem; } .m-block-shopsearch__form__btn, .m-block-shopsearch__form__tel { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: 20px; padding-right: 20px; text-align: center; } @media only screen and (min-width: 960px) { .m-block-shopsearch__form__btn, .m-block-shopsearch__form__tel { max-width: 400px; } } .m-block-shopsearch__form__btn img, .m-block-shopsearch__form__tel img { width: 100%; } .m-block-shopsearch__lead { font-size: var(--fontSize-h5); font-weight: bold; margin: 1rem 0; text-align: center; } .m-block-shopsearch .m-btn-group { margin-bottom: 0; } .m-block .m-box--top .m-box__head { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--color-key); color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; margin-left: -20px; margin-right: -20px; padding: 5px; } .m-block .m-box--top .m-box__head__icon { margin-right: 10px; width: 40px; } .m-block .m-box--top .m-box__head__txt { font-size: 20px; font-weight: bold; } .m-block .m-box--top .m-box__head__txt > small { font-size: 14px; font-weight: normal; margin-left: 10px; } .m-block .m-box--search { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #F4F4F4; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px 15px; } @media only screen and (min-width: 960px) { .m-block .m-box--search { padding: 20px; } } .m-block .m-box--search .m-box__hdg { font-size: 17px; font-weight: bold; line-height: 1.3; margin-bottom: 10px; white-space: nowrap; width: 100%; } .m-block .m-box--search .m-box__hdg br { display: none; } @media only screen and (min-width: 960px) { .m-block .m-box--search .m-box__hdg { margin-bottom: 0; width: 120px; } .m-block .m-box--search .m-box__hdg br { display: inline-block; } } .m-block .m-box--search .m-box__input { padding: 0 10px 0 0; position: relative; width: calc(100% - 80px); } @media only screen and (min-width: 960px) { .m-block .m-box--search .m-box__input { padding-left: 5px; width: calc(100% - 200px); } } .m-block .m-box--search .m-box__input__select, .m-block .m-box--search .m-box__input__txt { background: #fff; border: 2px solid #B4B4B4; border-radius: 5px; padding: 10px; width: 100%; } .m-block .m-box--search .m-box__input .m-icon, .m-block .m-box--search .m-box__input .m-form-error .is-error:before, .m-form-error .m-block .m-box--search .m-box__input .is-error:before { color: #999; font-size: 12px; margin-top: -0.5em; position: absolute; right: 25px; top: 50%; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .m-block .m-box--search .m-box__submit { width: 80px; } .m-block .m-box--search .m-box__submit > button { background: var(--color-key); border-radius: 10em; color: #fff; display: block; font-weight: bold; padding: 12px 1.5em; text-align: center; white-space: nowrap; width: 100%; } @media (hover: hover) { .m-block .m-box--search .m-box__submit > button:hover { opacity: 0.6; } } .m-scrollbox { background: var(--color-bg__gray__lighter); border: 1px solid var(--color-border__gray__light); border-radius: var(--radius); font-size: var(--fontSize-s); height: 10rem; margin: 0 auto; width: 100%; } .m-scrollbox__inner { height: 100%; overflow-x: hidden; overflow-y: auto; padding: 1rem; position: relative; } .m-scrollbox__inner__pre { margin: 0; white-space: pre-wrap; } .m-pager { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 50px; } @media only screen and (min-width: 960px) { .m-pager { gap: 1rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .m-pager__item { font-size: var(--fontSize-s); } @media only screen and (max-width: 600px) { .m-pager__item { display: none; } } .m-pager__item__text { font-size: var(--fontSize-ss); line-height: 1; } @media only screen and (max-width: 600px) { .m-pager__item--start, .m-pager__item--prev, .m-pager__item--next, .m-pager__item--end, .m-pager__item.is-current { display: block; } } .m-pager__item--start .m-icon--arrow-double { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .m-pager__item--prev .m-icon--arrow { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .m-pager__item .m-icon, .m-pager__item .m-form-error .is-error:before, .m-form-error .m-pager__item .is-error:before { color: var(--color-font__light); } @media only screen and (max-width: 959.98px) { .m-pager__item .m-icon, .m-pager__item .m-form-error .is-error:before, .m-form-error .m-pager__item .is-error:before { font-size: var(--fontSize-ss); } } .m-pager__item.is-current span, .m-pager__item a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid var(--color-border__gray__light); border-radius: var(--radius); color: var(--color-black); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; height: 4em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; width: 4em; } .m-pager__item.is-current span .m-icon, .m-pager__item.is-current span .m-form-error .is-error:before, .m-form-error .m-pager__item.is-current span .is-error:before, .m-pager__item a .m-icon, .m-pager__item a .m-form-error .is-error:before, .m-form-error .m-pager__item a .is-error:before { color: var(--color-font__light); } @media (hover: hover) { .m-pager__item a:hover { background-color: var(--color-bg__gray__dark); color: #fff; text-decoration: none; } .m-pager__item a:hover .m-icon, .m-pager__item a:hover .m-form-error .is-error:before, .m-form-error .m-pager__item a:hover .is-error:before { color: #fff; } } .m-pager__item.is-current span { background-color: var(--color-bg__gray__dark); color: #fff; text-decoration: none; } .m-pager__item.is-current span .m-icon, .m-pager__item.is-current span .m-form-error .is-error:before, .m-form-error .m-pager__item.is-current span .is-error:before { color: #fff; } .m-pager__item.is-current span { font-weight: bold; } @media only screen and (min-width: 960px) { .m-pager__item a { gap: 3px; } } .u-align-left { text-align: left !important; } .u-align-right { text-align: right !important; } .u-align-center { text-align: center !important; } /* Display */ @media only screen and (max-width: 959.98px) { .u-display-pc { display: none !important; } } @media only screen and (min-width: 960px) { .u-display-sp { display: none !important; } } .is-hidden { display: none !important; } .u-weight-bold { font-weight: bold; } .u-w-60 { width: 60%; } .u-w-100 { width: 100%; } .u-w--input-auto { width: auto; } .u-w--input2 { -webkit-box-sizing: content-box; box-sizing: content-box; width: 2em; } .u-w--input4 { -webkit-box-sizing: content-box; box-sizing: content-box; width: 4em; } .u-r-w-60-100 { width: 100%; } @media only screen and (min-width: 960px) { .u-r-w-60-100 { width: 60%; } } .u-ma0 { margin: 0rem !important; } .u-mb0 { margin-bottom: 0rem !important; } .u-mt0 { margin-top: 0rem !important; } .u-ml0 { margin-left: 0rem !important; } .u-mr0 { margin-right: 0rem !important; } .u-mx0 { margin-left: 0rem !important; margin-right: 0rem !important; } .u-my0 { margin-bottom: 0rem !important; margin-top: 0rem !important; } .u-pa0 { padding: 0rem !important; } .u-pb0 { padding-bottom: 0rem !important; } .u-pt0 { padding-top: 0rem !important; } .u-pl0 { padding-left: 0rem !important; } .u-pr0 { padding-right: 0rem !important; } .u-px0 { padding-left: 0rem !important; padding-right: 0rem !important; } .u-py0 { padding-bottom: 0rem !important; padding-top: 0rem !important; } .u-ma1 { margin: 1rem !important; } .u-mb1 { margin-bottom: 1rem !important; } .u-mt1 { margin-top: 1rem !important; } .u-ml1 { margin-left: 1rem !important; } .u-mr1 { margin-right: 1rem !important; } .u-mx1 { margin-left: 1rem !important; margin-right: 1rem !important; } .u-my1 { margin-bottom: 1rem !important; margin-top: 1rem !important; } .u-pa1 { padding: 1rem !important; } .u-pb1 { padding-bottom: 1rem !important; } .u-pt1 { padding-top: 1rem !important; } .u-pl1 { padding-left: 1rem !important; } .u-pr1 { padding-right: 1rem !important; } .u-px1 { padding-left: 1rem !important; padding-right: 1rem !important; } .u-py1 { padding-bottom: 1rem !important; padding-top: 1rem !important; } .u-ma2 { margin: 2rem !important; } .u-mb2 { margin-bottom: 2rem !important; } .u-mt2 { margin-top: 2rem !important; } .u-ml2 { margin-left: 2rem !important; } .u-mr2 { margin-right: 2rem !important; } .u-mx2 { margin-left: 2rem !important; margin-right: 2rem !important; } .u-my2 { margin-bottom: 2rem !important; margin-top: 2rem !important; } .u-pa2 { padding: 2rem !important; } .u-pb2 { padding-bottom: 2rem !important; } .u-pt2 { padding-top: 2rem !important; } .u-pl2 { padding-left: 2rem !important; } .u-pr2 { padding-right: 2rem !important; } .u-px2 { padding-left: 2rem !important; padding-right: 2rem !important; } .u-py2 { padding-bottom: 2rem !important; padding-top: 2rem !important; } .u-ma3 { margin: 3rem !important; } .u-mb3 { margin-bottom: 3rem !important; } .u-mt3 { margin-top: 3rem !important; } .u-ml3 { margin-left: 3rem !important; } .u-mr3 { margin-right: 3rem !important; } .u-mx3 { margin-left: 3rem !important; margin-right: 3rem !important; } .u-my3 { margin-bottom: 3rem !important; margin-top: 3rem !important; } .u-pa3 { padding: 3rem !important; } .u-pb3 { padding-bottom: 3rem !important; } .u-pt3 { padding-top: 3rem !important; } .u-pl3 { padding-left: 3rem !important; } .u-pr3 { padding-right: 3rem !important; } .u-px3 { padding-left: 3rem !important; padding-right: 3rem !important; } .u-py3 { padding-bottom: 3rem !important; padding-top: 3rem !important; } .u-ma4 { margin: 4rem !important; } .u-mb4 { margin-bottom: 4rem !important; } .u-mt4 { margin-top: 4rem !important; } .u-ml4 { margin-left: 4rem !important; } .u-mr4 { margin-right: 4rem !important; } .u-mx4 { margin-left: 4rem !important; margin-right: 4rem !important; } .u-my4 { margin-bottom: 4rem !important; margin-top: 4rem !important; } .u-pa4 { padding: 4rem !important; } .u-pb4 { padding-bottom: 4rem !important; } .u-pt4 { padding-top: 4rem !important; } .u-pl4 { padding-left: 4rem !important; } .u-pr4 { padding-right: 4rem !important; } .u-px4 { padding-left: 4rem !important; padding-right: 4rem !important; } .u-py4 { padding-bottom: 4rem !important; padding-top: 4rem !important; } .u-ma5 { margin: 5rem !important; } .u-mb5 { margin-bottom: 5rem !important; } .u-mt5 { margin-top: 5rem !important; } .u-ml5 { margin-left: 5rem !important; } .u-mr5 { margin-right: 5rem !important; } .u-mx5 { margin-left: 5rem !important; margin-right: 5rem !important; } .u-my5 { margin-bottom: 5rem !important; margin-top: 5rem !important; } .u-pa5 { padding: 5rem !important; } .u-pb5 { padding-bottom: 5rem !important; } .u-pt5 { padding-top: 5rem !important; } .u-pl5 { padding-left: 5rem !important; } .u-pr5 { padding-right: 5rem !important; } .u-px5 { padding-left: 5rem !important; padding-right: 5rem !important; } .u-py5 { padding-bottom: 5rem !important; padding-top: 5rem !important; } .u-ma6 { margin: 6rem !important; } .u-mb6 { margin-bottom: 6rem !important; } .u-mt6 { margin-top: 6rem !important; } .u-ml6 { margin-left: 6rem !important; } .u-mr6 { margin-right: 6rem !important; } .u-mx6 { margin-left: 6rem !important; margin-right: 6rem !important; } .u-my6 { margin-bottom: 6rem !important; margin-top: 6rem !important; } .u-pa6 { padding: 6rem !important; } .u-pb6 { padding-bottom: 6rem !important; } .u-pt6 { padding-top: 6rem !important; } .u-pl6 { padding-left: 6rem !important; } .u-pr6 { padding-right: 6rem !important; } .u-px6 { padding-left: 6rem !important; padding-right: 6rem !important; } .u-py6 { padding-bottom: 6rem !important; padding-top: 6rem !important; } .u-ma7 { margin: 7rem !important; } .u-mb7 { margin-bottom: 7rem !important; } .u-mt7 { margin-top: 7rem !important; } .u-ml7 { margin-left: 7rem !important; } .u-mr7 { margin-right: 7rem !important; } .u-mx7 { margin-left: 7rem !important; margin-right: 7rem !important; } .u-my7 { margin-bottom: 7rem !important; margin-top: 7rem !important; } .u-pa7 { padding: 7rem !important; } .u-pb7 { padding-bottom: 7rem !important; } .u-pt7 { padding-top: 7rem !important; } .u-pl7 { padding-left: 7rem !important; } .u-pr7 { padding-right: 7rem !important; } .u-px7 { padding-left: 7rem !important; padding-right: 7rem !important; } .u-py7 { padding-bottom: 7rem !important; padding-top: 7rem !important; } .u-ma8 { margin: 8rem !important; } .u-mb8 { margin-bottom: 8rem !important; } .u-mt8 { margin-top: 8rem !important; } .u-ml8 { margin-left: 8rem !important; } .u-mr8 { margin-right: 8rem !important; } .u-mx8 { margin-left: 8rem !important; margin-right: 8rem !important; } .u-my8 { margin-bottom: 8rem !important; margin-top: 8rem !important; } .u-pa8 { padding: 8rem !important; } .u-pb8 { padding-bottom: 8rem !important; } .u-pt8 { padding-top: 8rem !important; } .u-pl8 { padding-left: 8rem !important; } .u-pr8 { padding-right: 8rem !important; } .u-px8 { padding-left: 8rem !important; padding-right: 8rem !important; } .u-py8 { padding-bottom: 8rem !important; padding-top: 8rem !important; } .u-ma9 { margin: 9rem !important; } .u-mb9 { margin-bottom: 9rem !important; } .u-mt9 { margin-top: 9rem !important; } .u-ml9 { margin-left: 9rem !important; } .u-mr9 { margin-right: 9rem !important; } .u-mx9 { margin-left: 9rem !important; margin-right: 9rem !important; } .u-my9 { margin-bottom: 9rem !important; margin-top: 9rem !important; } .u-pa9 { padding: 9rem !important; } .u-pb9 { padding-bottom: 9rem !important; } .u-pt9 { padding-top: 9rem !important; } .u-pl9 { padding-left: 9rem !important; } .u-pr9 { padding-right: 9rem !important; } .u-px9 { padding-left: 9rem !important; padding-right: 9rem !important; } .u-py9 { padding-bottom: 9rem !important; padding-top: 9rem !important; } .u-ma10 { margin: 10rem !important; } .u-mb10 { margin-bottom: 10rem !important; } .u-mt10 { margin-top: 10rem !important; } .u-ml10 { margin-left: 10rem !important; } .u-mr10 { margin-right: 10rem !important; } .u-mx10 { margin-left: 10rem !important; margin-right: 10rem !important; } .u-my10 { margin-bottom: 10rem !important; margin-top: 10rem !important; } .u-pa10 { padding: 10rem !important; } .u-pb10 { padding-bottom: 10rem !important; } .u-pt10 { padding-top: 10rem !important; } .u-pl10 { padding-left: 10rem !important; } .u-pr10 { padding-right: 10rem !important; } .u-px10 { padding-left: 10rem !important; padding-right: 10rem !important; } .u-py10 { padding-bottom: 10rem !important; padding-top: 10rem !important; } /* NISAコラムCVエリア */ .m-block-bnr { margin: 2em auto 0; display: block; text-align: center; } @media only screen and (min-width: 960px) { .m-block-bnr { margin-top: 4em; } } /* 2503_共通フッター都道府県一覧・ほけんの学校追加 */ .l-footer__services__search { margin-left: -20px; margin-right: -20px; } @media only screen and (min-width: 960px) { .l-footer__services__search { margin: 0; } } .l-footer__services__search .c-accordion { background-color: transparent; border-radius: 0; box-shadow: none; } .l-footer__services__search .c-accordion__trigger { font-size: var(--fontSize-s); margin-bottom: .75em; padding: 0 20px; } @media only screen and (min-width: 960px) { .l-footer__services__search .c-accordion__trigger { padding: 0; } } @media (hover: hover) { .l-footer__services__search .c-accordion__trigger:hover p { text-decoration: underline; } } .l-footer__services__search .c-accordion__trigger .m-icon { right: 20px; } @media only screen and (min-width: 960px) { .l-footer__services__search .c-accordion__trigger .m-icon { right: .5em; } } .l-footer__services__search .c-accordion__body { background-color: #fff; padding: 1em 20px; } .l-footer__services__search__lists { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; font-size: var(--fontSize-s); gap: 1em; } .l-footer__services__search__lists > li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; gap: .5em; } .l-footer__services__search__lists > li span { font-weight: bold; } .l-footer__services__search__lists ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: .5em 1em; line-height: 1.3; } .l-footer__services__search__lists ul li:not(:last-child) { border-right: 1px solid var(--color-border__gray__light); padding-right: 1em; } .l-footer__services__search + .l-footer__services__lists { border-top: 1px solid var(--color-border__gray__light); } .l-footer__services__search:has(.is-open) + .l-footer__services__lists { border-top: none; }