@charset "UTF-8"; /* ======================================= このCSSファイルはSassにて生成されています。 This file is created by Sass Files. =========================================*/ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* --------------------------------------- Mixin -----------------------------------------*/ /* --------------------------------------- Basic Settings -----------------------------------------*/ :root { --cl-primary: #0e72ac; --cl-secondary: #3f6a82; --cl-tertiary: #fee691; --cl-accent: #da0303; --cl-border: #ccc; --cl-bg: #fff; --cl-text: #333; --cl-link: #333; --cl-link-hover: #333; --cl-gray: #ccc; --cl-white: #fff; --font-awesome: "Font Awesome 7 Free"; --font-noto: "Noto Sans JP", sans-serif; --font-montserrat: "Montserrat", sans-serif; --scale: 1.1; --trim-leading: calc((1em - 1lh) / 2); --transition: 0.3s ease-in-out; --opacity: 0.8; } html body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; font-family: var(--font-noto); font-size: 1rem; background-color: var(--cl-bg); color: var(--cl-text); line-height: 1.5; display: grid; grid-template: "header" auto "contents" 1fr "footer" auto/1fr; min-height: 100dvh; } html body img { width: 100%; height: auto; vertical-align: bottom; font-size: 0; line-height: 0; } html body a { color: var(--cl-link); text-decoration: none; word-break: break-all; transition: var(--transition); } html body a:hover, html body a:link, html body a:visited, html body a:active { text-decoration: none; } @media (any-hover: hover) { html body a:hover { color: var(--cl-link-hover); opacity: var(--opacity); } } @media screen and (width <= 750px) { html body .pc_only { display: none; } } @media screen and (width > 750px) { html body .sp_only { display: none; } } html body .d-inline-block { display: inline-block; } /* --------------------------------------- Header -----------------------------------------*/ .header { grid-area: header; background-color: var(--cl-primary); background-repeat: no-repeat; background-position: bottom left; background-size: 100% auto; } @media screen and (width > 1024px) { .header { background-image: url("../img/layout/header/header_bg_pc.svg"); } } @media screen and (width <= 1024px) { .header { background-image: url("../img/layout/header/header_bg_sp.svg"); } } .header__inner { width: 100%; } @media screen and (width > 1024px) { .header__inner { padding-block: 2rem 0; } } @media screen and (width <= 1024px) { .header__inner { padding-block: 6.1538461538vw 0; } } @media screen and (width > 1024px) { .header__logo { width: 10.8125rem; margin-left: 3rem; } } @media screen and (width <= 1024px) { .header__logo { width: 9.625rem; margin-inline: auto; } } .header__logo img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .header .mv { width: 100%; max-width: 62.5rem; margin-inline: auto; display: grid; position: relative; } @media screen and (width > 1024px) { .header .mv { grid-template-columns: 38.625rem 1fr; margin-top: 0.5rem; grid-template-areas: "head img" "features img" "cta img"; } } @media screen and (width <= 1024px) { .header .mv { grid-template-columns: 1fr; margin-top: 6.1538461538vw; grid-template-areas: "head" "img" "features" "cta"; } } .header .mv__head { grid-area: head; display: flex; align-items: center; justify-content: center; flex-direction: column; } @media screen and (width > 1024px) { .header .mv__head { margin-bottom: 2.625rem; } } @media screen and (width <= 1024px) { .header .mv__head { margin-bottom: 6.1538461538vw; } } .header .mv__subtitle { color: var(--cl-white); display: flex; align-items: center; font-weight: 700; letter-spacing: 0.05em; } @media screen and (width > 1024px) { .header .mv__subtitle { font-size: 1.5rem; gap: 1rem; } } @media screen and (width <= 1024px) { .header .mv__subtitle { font-size: 17px; font-size: 4.358974359vw; gap: 4.1025641026vw; } } .header .mv__subtitle::before, .header .mv__subtitle::after { content: ""; display: block; width: 1px; border-left: var(--cl-white) 1px solid; } @media screen and (width > 1024px) { .header .mv__subtitle::before, .header .mv__subtitle::after { height: 1.5rem; } } @media screen and (width <= 1024px) { .header .mv__subtitle::before, .header .mv__subtitle::after { height: 4.358974359vw; } } .header .mv__subtitle::before { transform: rotate(-45deg); } .header .mv__subtitle::after { transform: rotate(45deg); } .header .mv__title { color: var(--cl-white); font-weight: 700; text-align: center; line-height: 1.3; } @media screen and (width > 1024px) { .header .mv__title { font-size: 3rem; } } @media screen and (width <= 1024px) { .header .mv__title { font-size: 27px; font-size: 6.9230769231vw; } } .header .mv__features { grid-area: features; width: 100%; display: grid; background-color: #d7f5ff; } @media screen and (width > 1024px) { .header .mv__features { max-width: 37.5rem; margin-inline: auto; gap: 0; grid-template-columns: auto auto auto; justify-content: space-between; padding: 0.75rem 1.5rem; } } @media screen and (width <= 1024px) { .header .mv__features { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; padding: 3.0769230769vw 5.1282051282vw; } } .header .mv__feature { display: grid; align-items: center; } @media screen and (width > 1024px) { .header .mv__feature { gap: 0; grid-template-rows: subgrid; grid-row: span 3; flex-direction: column; width: -moz-fit-content; width: fit-content; } } @media screen and (width <= 1024px) { .header .mv__feature { gap: 0 2.0512820513vw; grid-template-columns: auto 1fr; grid-template-areas: "badge value"; } .header .mv__feature:has(.mv__feature-note) { grid-template-areas: "badge value" "badge note"; } } @media screen and (width > 1024px) { .header .mv__feature:not(:last-child) { border-right: #ccc 1px dashed; padding-right: 0.75rem; } } @media screen and (width <= 1024px) { .header .mv__feature:not(:last-child) { border-bottom: #ccc 1px dashed; padding-bottom: 2.0512820513vw; } } @media screen and (width > 1024px) { .header .mv__feature:not(:first-child) { padding-left: 0.75rem; } } @media screen and (width <= 1024px) { .header .mv__feature:not(:first-child) { margin-top: 2.0512820513vw; } } .header .mv__feature-badge { display: flex; align-items: center; justify-content: center; border: var(--cl-primary) 1px solid; background-color: var(--cl-white); color: var(--cl-primary); font-weight: 700; width: -moz-fit-content; width: fit-content; margin: 0 auto; } @media screen and (width > 1024px) { .header .mv__feature-badge { gap: 0.75rem; border-radius: 0.375rem; padding: 0.5rem 1rem; } } @media screen and (width <= 1024px) { .header .mv__feature-badge { grid-area: badge; border-radius: 1.5384615385vw; padding: 2.0512820513vw 4.1025641026vw; gap: 2.0512820513vw; } } @media screen and (width > 1024px) { .header .mv__feature-badge .-img { width: 1.8125rem; height: 1.8125rem; } } @media screen and (width <= 1024px) { .header .mv__feature-badge .-img { width: 6.4102564103vw; height: 6.4102564103vw; } } .header .mv__feature-badge .-img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } @media screen and (width > 1024px) { .header .mv__feature-badge .-text { font-size: 1rem; } } @media screen and (width <= 1024px) { .header .mv__feature-badge .-text { font-size: 13px; font-size: 3.3333333333vw; } } @media screen and (width > 1024px) { .header .mv__feature-badge .-em { font-size: 1.25rem; } } @media screen and (width <= 1024px) { .header .mv__feature-badge .-em { font-size: 18px; font-size: 4.6153846154vw; } } @media screen and (width > 1024px) { .header .mv__feature-value { margin-top: 0.5rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value { grid-area: value; display: flex; align-items: center; gap: 2.0512820513vw; } } @media screen and (width > 1024px) { .header .mv__feature-value-label { font-size: 0.75rem; margin-top: 0.5rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value-label { font-size: 12px; font-size: 3.0769230769vw; } } .header .mv__feature-note { color: #888; } @media screen and (width > 1024px) { .header .mv__feature-note { font-size: 0.5625rem; } } @media screen and (width <= 1024px) { .header .mv__feature-note { grid-area: note; font-size: 9px; font-size: 2.3076923077vw; } } .header .mv__feature-value { color: #ef5655; letter-spacing: 0.05em; font-weight: 700; text-align: center; } .header .mv__feature-value .-label { color: var(--cl-text); font-weight: 500; } @media screen and (width > 1024px) { .header .mv__feature-value .-label { font-size: 0.8125rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value .-label { font-size: 11px; font-size: 2.8205128205vw; } } .header .mv__feature-value .-num { font-family: var(--font-montserrat); } @media screen and (width > 1024px) { .header .mv__feature-value--01 .-amount { font-size: 1.5rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value--01 .-amount { font-size: 22px; font-size: 5.641025641vw; } } @media screen and (width > 1024px) { .header .mv__feature-value--01 .-em { font-size: 1.9375rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value--01 .-em { font-size: 30px; font-size: 7.6923076923vw; } } @media screen and (width > 1024px) { .header .mv__feature-value--01 .-sm { font-size: 1rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value--01 .-sm { font-size: 16px; font-size: 4.1025641026vw; } } .header .mv__feature-value--02 .-amount { display: flex; align-items: center; justify-content: center; } @media screen and (width > 1024px) { .header .mv__feature-value--02 .-amount { gap: 0.25rem; font-size: 0.75rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value--02 .-amount { gap: 1.0256410256vw; font-size: 12px; font-size: 3.0769230769vw; } } @media screen and (width > 1024px) { .header .mv__feature-value--02 .-em { font-size: 1.9375rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value--02 .-em { font-size: 30px; font-size: 7.6923076923vw; } } @media screen and (width > 1024px) { .header .mv__feature-value--02 .-unit { font-size: 1.5rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value--02 .-unit { font-size: 22px; font-size: 5.641025641vw; } } .header .mv__feature-value--03 .-amount { display: flex; align-items: center; justify-content: center; } @media screen and (width > 1024px) { .header .mv__feature-value--03 .-amount { font-size: 0.8125rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value--03 .-amount { font-size: 10px; font-size: 2.5641025641vw; } } @media screen and (width > 1024px) { .header .mv__feature-value--03 .-em { font-size: 1.9375rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value--03 .-em { font-size: 29px; font-size: 7.4358974359vw; } } @media screen and (width > 1024px) { .header .mv__feature-value--03 .-unit { font-size: 0.625rem; } } @media screen and (width <= 1024px) { .header .mv__feature-value--03 .-unit { font-size: 10px; font-size: 2.5641025641vw; writing-mode: vertical-rl; } } .header .mv__cta { grid-area: cta; display: flex; align-items: center; justify-content: center; } @media screen and (width > 1024px) { .header .mv__cta { padding-bottom: 2rem; } } @media screen and (width <= 1024px) { .header .mv__cta { flex-direction: column; padding-bottom: 6.1538461538vw; background-color: #d7f5ff; } } .header .mv__cta-catch { display: flex; align-items: center; justify-content: center; color: var(--cl-accent); } @media screen and (width > 1024px) { .header .mv__cta-catch { display: none; } } @media screen and (width <= 1024px) { .header .mv__cta-catch { font-size: 14px; font-size: 3.5897435897vw; gap: 2.0512820513vw; } } .header .mv__cta-catch::before, .header .mv__cta-catch::after { content: ""; display: block; width: 1px; border-left: var(--cl-accent) 1px solid; } @media screen and (width <= 1024px) { .header .mv__cta-catch::before, .header .mv__cta-catch::after { height: 3.5897435897vw; } } .header .mv__cta-catch::before { transform: rotate(-45deg); } .header .mv__cta-catch::after { transform: rotate(45deg); } .header .mv__cta-btn { flex-direction: column; font-weight: 700; letter-spacing: 0.05em; } @media screen and (width > 1024px) { .header .mv__cta-btn { max-width: 30rem; gap: 0.5rem; font-size: 1.3125rem; padding: 0.5rem 0; margin-top: 2rem; } } @media screen and (width <= 1024px) { .header .mv__cta-btn { max-width: 89.7435897436vw; gap: 1.5384615385vw; font-size: 18px; font-size: 4.6153846154vw; padding: 3.0769230769vw 0; margin-top: 2.0512820513vw; } } .header .mv__cta-btn::after { content: "\f054"; font-family: var(--font-awesome); font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (width > 1024px) { .header .mv__cta-btn::after { right: 1.5rem; } } @media screen and (width <= 1024px) { .header .mv__cta-btn::after { right: 6.1538461538vw; } } .header .mv__cta-btn .-catch { display: flex; align-items: center; justify-content: center; font-weight: 500; } @media screen and (width > 1024px) { .header .mv__cta-btn .-catch { font-size: 1rem; gap: 1rem; } } @media screen and (width <= 1024px) { .header .mv__cta-btn .-catch { display: none; } } .header .mv__cta-btn .-catch::before, .header .mv__cta-btn .-catch::after { content: ""; display: block; width: 1px; border-left: var(--cl-white) 1px solid; } @media screen and (width > 1024px) { .header .mv__cta-btn .-catch::before, .header .mv__cta-btn .-catch::after { height: 1rem; } } .header .mv__cta-btn .-catch::before { transform: rotate(-45deg); } .header .mv__cta-btn .-catch::after { transform: rotate(45deg); } .header .mv__img { grid-area: img; } @media screen and (width > 1024px) { .header .mv__img { position: absolute; bottom: -0.375rem; left: 0; width: 25.5625rem; height: 31.375rem; } } @media screen and (width <= 1024px) { .header .mv__img { width: 100%; } } .header .mv__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } /* --------------------------------------- Main -----------------------------------------*/ .main { grid-area: contents; } /* --------------------------------------- Footer -----------------------------------------*/ .footer { grid-area: footer; border-top: var(--cl-border) 1px solid; } .footer__wrapper { padding-block: 2rem 2.25rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; } .footer__logo { width: 16.25rem; } @media screen and (width <= 750px) { .footer__logo { width: 12.25rem; } } .footer__logo img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .footer__copyright { color: #888; font-size: 0.6875rem; } /* --------------------------------------- Button -----------------------------------------*/ .btn { width: 100%; display: flex; align-items: center; justify-content: center; border: transparent; border-radius: 9999px; cursor: pointer; transition: var(--transition); position: relative; } @media screen and (width > 750px) { .btn { gap: 0.5rem; } } @media screen and (width <= 750px) { .btn { gap: 2.0512820513vw; } } .btn--primary { background-color: var(--cl-primary); color: var(--cl-white); } @media screen and (width > 750px) { .btn--primary { box-shadow: 0 0.25rem 0 0 #0b5179; } } @media screen and (width <= 750px) { .btn--primary { box-shadow: 0 1.0256410256vw 0 0 #0b5179; } } @media (any-hover: hover) { .btn--primary:hover { color: var(--cl-white); box-shadow: none; opacity: var(--opacity); } } @media screen and (any-hover: hover) and (width > 750px) { .btn--primary:hover { transform: translateY(0.25rem); } } @media screen and (any-hover: hover) and (width <= 750px) { .btn--primary:hover { transform: translateY(1.0256410256vw); } } .btn--accent { background-color: var(--cl-accent); color: var(--cl-white); } @media screen and (width > 750px) { .btn--accent { box-shadow: 0 0.375rem 0 0 #b70909; } } @media screen and (width <= 750px) { .btn--accent { box-shadow: 0 1.5384615385vw 0 0 #b70909; } } @media (any-hover: hover) { .btn--accent:hover { color: var(--cl-white); box-shadow: none; opacity: var(--opacity); } } @media screen and (any-hover: hover) and (width > 750px) { .btn--accent:hover { transform: translateY(0.375rem); } } @media screen and (any-hover: hover) and (width <= 750px) { .btn--accent:hover { transform: translateY(1.5384615385vw); } } /* --------------------------------------- CTA Fixed -----------------------------------------*/ .cta-fixed { position: fixed; z-index: 300; right: 0; top: 50%; transform: translateY(-50%); } @media screen and (width <= 750px) { .cta-fixed { display: none; } } .cta-fixed__link { display: flex; align-items: center; justify-content: center; background-color: var(--cl-accent); color: var(--cl-white); font-weight: 700; letter-spacing: 0.12em; } @media screen and (width > 750px) { .cta-fixed__link { gap: 1rem; width: 3.75rem; height: 12.875rem; border-radius: 0.75rem 0 0 0.75rem; box-shadow: 0 0 0.8125rem 0 rgba(0, 0, 0, 0.16); writing-mode: vertical-rl; } } @media (any-hover: hover) { .cta-fixed__link:hover { color: var(--cl-white); } } .cta-fixed__link:after { content: ""; background-image: url("../img/layout/footer/fixed_cta_icon.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; } @media screen and (width > 750px) { .cta-fixed__link:after { width: 1.25rem; height: 1.25rem; } } /* --------------------------------------- CTA -----------------------------------------*/ .cta { background-color: color-mix(in srgb, var(--cl-accent) 10%, white); } .cta__inner { display: flex; align-items: center; justify-content: center; flex-direction: column; } @media screen and (width > 750px) { .cta__inner { gap: 1rem; padding-block: 1.5rem 2rem; } } @media screen and (width <= 750px) { .cta__inner { gap: 3.0769230769vw; padding-block: 4.1025641026vw 6.1538461538vw; } .btm__fixed__cta .cta__inner { padding: 0.8125rem 0.8125rem 0.8125rem; gap: 0.3125rem; } } .cta__label { color: var(--cl-accent); display: flex; align-items: center; justify-content: center; } @media screen and (width > 750px) { .cta__label { gap: 1rem; font-size: 1.125rem; } } @media screen and (width <= 750px) { .cta__label { gap: 3.0769230769vw; font-size: 16px; font-size: 4.1025641026vw; } .btm__fixed__cta .cta__label { font-size: 13px; font-size: 3.3333333333vw; line-height: 1; } } .cta__label::before, .cta__label::after { content: ""; display: block; width: 1px; border-left: var(--cl-accent) 1px solid; } @media screen and (width > 750px) { .cta__label::before, .cta__label::after { height: 1.125rem; } } @media screen and (width <= 750px) { .cta__label::before, .cta__label::after { height: 4.1025641026vw; } } .cta__label::before { transform: rotate(-45deg); } .cta__label::after { transform: rotate(45deg); } .cta__btn { letter-spacing: 0.05em; font-weight: 700; } @media screen and (width > 750px) { .cta__btn { max-width: 30rem; padding: 1rem; font-size: 1.25rem; } } @media screen and (width <= 750px) { .cta__btn { max-width: 89.7435897436vw; padding: 3.0769230769vw; font-size: 18px; font-size: 4.6153846154vw; font-weight: 700; } .btm__fixed__cta .cta__btn { padding: 1.7948717949vw; font-size: 14px; font-size: 3.5897435897vw; } .btm__fixed__cta .cta__btn.btn--accent { box-shadow: 0 1.0256410256vw 0 0 #b70909; } } .cta__btn::after { content: "\f054"; font-family: var(--font-awesome); font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (width > 1024px) { .cta__btn::after { right: 1.5rem; } } @media screen and (width <= 1024px) { .cta__btn::after { right: 6.1538461538vw; } } @media screen and (width <= 750px) { body { padding-bottom: 7.625rem; } } .btm__fixed__cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 11; opacity: 0; visibility: hidden; transition: opacity 0.3s; } @media screen and (width > 750px) { .btm__fixed__cta { display: none; } } .btm__fixed__cta.visible { opacity: 1; visibility: visible; } /* --------------------------------------- Form -----------------------------------------*/ textarea, input[type=text], input[type=email], input[type=number], select { background-color: var(--cl-white); border: #dedede 1px solid; box-sizing: border-box; } @media screen and (width > 750px) { textarea, input[type=text], input[type=email], input[type=number], select { border-radius: 0.375rem; padding: 0.75rem 1rem; } } @media screen and (width <= 750px) { textarea, input[type=text], input[type=email], input[type=number], select { border-radius: 1.0256410256vw; padding: 2.0512820513vw 4.1025641026vw; } } input[type=radio] { position: relative; background-color: var(--cl-white); border: #dedede 1px solid; border-radius: 50%; box-sizing: border-box; } input[type=radio]:checked { border: var(--cl-secondary) 1px solid; } input[type=radio]:checked::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--cl-secondary); border-radius: 50%; } @media screen and (width > 750px) { input[type=radio]:checked::before { width: calc(100% - 0.25rem); height: calc(100% - 0.25rem); } } @media screen and (width <= 750px) { input[type=radio]:checked::before { width: calc(100% - 1.0256410256vw); height: calc(100% - 1.0256410256vw); } } input[type=checkbox] + label, input[type=radio] + label { cursor: pointer; } input[type=checkbox]:checked + label, input[type=radio]:checked + label { font-weight: bold; } input[type=text]:disabled { background-color: #e2e2e2; } /* --------------------------------------- Section -----------------------------------------*/ .section-head { display: flex; align-items: center; justify-content: center; flex-direction: column; } .section-head__label { color: var(--cl-primary); font-weight: 700; letter-spacing: 0.05em; border: var(--cl-primary) 2px solid; border-radius: 9999px; line-height: 1.3; } @media screen and (width > 750px) { .section-head__label { font-size: 1.25rem; padding: 0.25rem 1rem; margin-bottom: 1rem; box-shadow: 0.25rem 0.25rem 0 0 rgba(8, 65, 152, 0.2); } } @media screen and (width <= 750px) { .section-head__label { font-size: 13px; font-size: 3.3333333333vw; padding: 2.0512820513vw 2.5641025641vw; margin-bottom: 4.1025641026vw; box-shadow: 1.0256410256vw 1.0256410256vw 0 0 rgba(8, 65, 152, 0.2); } } .section-head__heading { font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (width > 750px) { .section-head__heading { font-size: 2.5rem; } } @media screen and (width <= 750px) { .section-head__heading { font-size: 21px; font-size: 5.3846153846vw; } } .section-head__heading::after { content: ""; display: block; background-color: var(--cl-primary); } @media screen and (width > 750px) { .section-head__heading::after { width: 3.75rem; height: 0.3125rem; margin: 1.5rem auto 0; } } @media screen and (width <= 750px) { .section-head__heading::after { width: 12.3076923077vw; height: 1.0256410256vw; margin: 4.1025641026vw auto 0; } } .section-head__heading .-em { color: var(--cl-primary); } .section-head__heading .-num { font-family: var(--font-montserrat); } @media screen and (width > 750px) { .section-head__heading .-num { font-size: 2.8125rem; } } @media screen and (width <= 750px) { .section-head__heading .-num { font-size: 27px; font-size: 6.9230769231vw; } } .section-head.is_white { color: var(--cl-white); } .section-head.is_white .section-head__heading::after { background-color: var(--cl-white); } .problem { background-repeat: no-repeat; background-size: 100% auto; background-position: bottom center; } @media screen and (width > 750px) { .problem { background-image: -webkit-image-set(url("../img/page/problem_bg_pc.webp") type("image/webp"), url("../img/page/problem_bg_pc.png") type("image/png")); background-image: image-set(url("../img/page/problem_bg_pc.webp") type("image/webp"), url("../img/page/problem_bg_pc.png") type("image/png")); } } @media screen and (width <= 750px) { .problem { background-image: -webkit-image-set(url("../img/page/problem_bg_sp.webp") type("image/webp"), url("../img/page/problem_bg_sp.png") type("image/png")); background-image: image-set(url("../img/page/problem_bg_sp.webp") type("image/webp"), url("../img/page/problem_bg_sp.png") type("image/png")); } } .problem__inner { width: 100%; max-width: 62.5rem; margin-inline: auto; } @media screen and (width > 750px) { .problem__inner { padding-block: 4rem; } } @media screen and (width <= 750px) { .problem__inner { padding-block: 16.4102564103vw; } } @media screen and (width > 750px) { .problem__head { margin-bottom: 2.5rem; } } @media screen and (width <= 750px) { .problem__head { margin-bottom: 6.1538461538vw; } } .problem__img { margin-inline: auto; } @media screen and (width > 750px) { .problem__img { width: 46.625rem; } } @media screen and (width <= 750px) { .problem__img { width: 100%; } } .problem__img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .solution { background-color: var(--cl-primary); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; } @media screen and (width > 750px) { .solution { background-image: url("../img/page/solution_bg_pc.svg"); } } @media screen and (width <= 750px) { .solution { background-image: url("../img/page/solution_bg_sp.svg"); } } @media screen and (width > 750px) { .solution__head { margin-bottom: 5.5rem; } } @media screen and (width <= 750px) { .solution__head { margin-bottom: 14.358974359vw; } } .solution__inner { width: calc(100% - 40px); max-width: 62.5rem; margin-inline: auto; } @media screen and (width > 750px) { .solution__inner { padding-block: 6.5rem 13.75rem; } } @media screen and (width <= 750px) { .solution__inner { padding-block: 4rem 9rem; } } .solution__cards { display: grid; } @media screen and (width > 1024px) { .solution__cards { grid-template-columns: repeat(4, 1fr); gap: 0.8125rem; } } @media screen and (width <= 1024px) { .solution__cards { grid-template-columns: repeat(2, 1fr); gap: 16.4102564103vw 2.0512820513vw; } } .solution__card { display: grid; gap: 0; background-color: var(--cl-white); position: relative; } @media screen and (width > 1024px) { .solution__card { grid-template-rows: subgrid; grid-row: span 4; border-radius: 0.75rem; padding-block: 3rem 2.25rem; } } @media screen and (width <= 1024px) { .solution__card { border-radius: 2.0512820513vw; padding-block: 8.2051282051vw 6.1538461538vw; } } .solution__card-point { position: absolute; left: 50%; transform: translateX(-50%); } @media screen and (width > 1024px) { .solution__card-point { width: 5.5rem; height: 5.5rem; top: -2.75rem; } } @media screen and (width <= 1024px) { .solution__card-point { width: 15.1282051282vw; height: 15.1282051282vw; top: -7.6923076923vw; } } .solution__card-point img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .solution__card-label { background-color: color-mix(in srgb, var(--cl-primary) 10%, var(--cl-white) 90%); display: flex; align-items: center; justify-content: center; border-radius: 9999px; color: var(--cl-primary); font-weight: 700; letter-spacing: 0.05em; margin-inline: auto; } @media screen and (width > 1024px) { .solution__card-label { width: 8.75rem; font-size: 1.125rem; padding: 0.25rem 0.5rem; } } @media screen and (width <= 1024px) { .solution__card-label { width: 25.641025641vw; font-size: 13px; font-size: 3.3333333333vw; padding: 1.0256410256vw 2.0512820513vw; } } .solution__card-heading { color: var(--cl-primary); font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (width > 1024px) { .solution__card-heading { margin-top: 1rem; font-size: 1.25rem; } } @media screen and (width <= 1024px) { .solution__card-heading { margin-top: 3.0769230769vw; font-size: 16px; font-size: 4.1025641026vw; } } .solution__card-heading--amount { color: var(--cl-text); font-weight: 500; } @media screen and (width > 1024px) { .solution__card-heading--amount { font-size: 1.125rem; } } @media screen and (width <= 1024px) { .solution__card-heading--amount { font-size: 13px; font-size: 3.3333333333vw; } } .solution__card-value { display: flex; justify-content: center; align-items: baseline; color: #ef5655; font-weight: 700; } @media screen and (width > 1024px) { .solution__card-value { font-size: 1.6875rem; } } @media screen and (width <= 1024px) { .solution__card-value { font-size: 20px; font-size: 5.1282051282vw; } } .solution__card-value .-num { font-family: var(--font-montserrat); } @media screen and (width > 1024px) { .solution__card-value .-em { font-size: 2.375rem; } } @media screen and (width <= 1024px) { .solution__card-value .-em { font-size: 28px; font-size: 7.1794871795vw; } } .solution__card-note { display: flex; align-items: center; justify-content: center; letter-spacing: 0.05em; font-weight: 700; } @media screen and (width > 1024px) { .solution__card-note { gap: 0.5rem; font-size: 1rem; } } @media screen and (width <= 1024px) { .solution__card-note { gap: 2.0512820513vw; font-size: 11px; font-size: 2.8205128205vw; } } .solution__card-note::before, .solution__card-note::after { content: ""; display: block; width: 1px; border-left: var(--cl-text) 1px solid; } @media screen and (width > 1024px) { .solution__card-note::before, .solution__card-note::after { height: 1rem; } } @media screen and (width <= 1024px) { .solution__card-note::before, .solution__card-note::after { height: 2.8205128205vw; } } .solution__card-note::before { transform: rotate(-45deg); } .solution__card-note::after { transform: rotate(45deg); } .solution__card-img { margin-inline: auto; } @media screen and (width > 1024px) { .solution__card-img { width: 6.4375rem; } } @media screen and (width <= 1024px) { .solution__card-img { width: 17.9487179487vw; } } .solution__card-img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .solution__feature { color: var(--cl-white); text-align: center; letter-spacing: 0.05em; } @media screen and (width > 750px) { .solution__feature { margin-top: 4rem; font-size: 2rem; } } @media screen and (width <= 750px) { .solution__feature { margin-top: 10.2564102564vw; font-size: 18px; font-size: 4.6153846154vw; } } .solution__feature .-wakuwaku { display: inline-block; background-color: #38d3cc; font-weight: 700; } @media screen and (width > 750px) { .solution__feature .-wakuwaku { font-size: 2.125rem; padding: 0.125rem 0.5rem; border-radius: 0.375rem; } } @media screen and (width <= 750px) { .solution__feature .-wakuwaku { font-size: 20px; font-size: 5.1282051282vw; padding: 0.5128205128vw 2.0512820513vw; border-radius: 1.0256410256vw; } } .example { background-color: #edf8ff; } @media screen and (width > 750px) { .example__head { margin-bottom: 3.5rem; } } @media screen and (width <= 750px) { .example__head { margin-bottom: 6.1538461538vw; } } .example__inner { width: calc(100% - 40px); max-width: 62.5rem; margin-inline: auto; } @media screen and (width > 750px) { .example__inner { padding-block: 6.5rem; } } @media screen and (width <= 750px) { .example__inner { padding-block: 4rem; } } .example__subtitle { display: flex; align-items: center; justify-content: center; color: var(--cl-primary); font-weight: 700; letter-spacing: 0.05em; } @media screen and (width > 750px) { .example__subtitle { gap: 1rem; font-size: 1.3125rem; margin-bottom: 2.625rem; } } @media screen and (width <= 750px) { .example__subtitle { gap: 4.1025641026vw; font-size: 16px; font-size: 4.1025641026vw; margin-bottom: 6.1538461538vw; } } .example__subtitle::before, .example__subtitle::after { content: ""; display: block; width: 1px; height: 1.3125rem; border-left: var(--cl-primary) 1px solid; } .example__subtitle::before { transform: rotate(-45deg); } .example__subtitle::after { transform: rotate(45deg); } .example__comparison { display: flex; flex-direction: column; } @media screen and (width > 1024px) { .example__comparison { gap: 5.625rem; } } @media screen and (width <= 1024px) { .example__comparison { gap: 16.4102564103vw; } } .example__box { position: relative; } .example__box:first-of-type::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background-color: rgba(204, 204, 204, 0.8); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); } @media screen and (width > 1024px) { .example__box:first-of-type::after { width: 4.5rem; height: 1.5625rem; bottom: -3.5rem; } } @media screen and (width <= 1024px) { .example__box:first-of-type::after { width: 14.1025641026vw; height: 4.8717948718vw; bottom: -10.2564102564vw; } } .example__badge { width: -moz-fit-content; width: fit-content; border-radius: 9999px; background-color: var(--cl-white); font-weight: 700; letter-spacing: 0.05em; position: absolute; left: 50%; transform: translateX(-50%); } @media screen and (width > 1024px) { .example__badge { font-size: 1rem; padding: 0.125rem 2rem; top: -1rem; } } @media screen and (width <= 1024px) { .example__badge { font-size: 13px; font-size: 3.3333333333vw; padding: 0.5128205128vw 6.1538461538vw; top: -3.3333333333vw; } } .example__badge--before { border: 2px solid #888; color: #888; } .example__badge--after { border: 2px solid #084198; color: #084198; } .example__title { color: var(--cl-white); font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (width > 1024px) { .example__title { font-size: 1.3125rem; border-radius: 0.625rem 0.625rem 0 0; padding-block: 1rem; } } @media screen and (width <= 1024px) { .example__title { font-size: 18px; font-size: 4.6153846154vw; border-radius: 2.0512820513vw 2.0512820513vw 0 0; padding-block: 3.5897435897vw; } } .example__title--before { background-color: #888; border: #888 2px solid; } .example__title--after { background-color: #084198; border: #084198 2px solid; } .example__loans { border-left: 2px solid #a5a5a5; border-right: 2px solid #a5a5a5; border-bottom: 2px solid #a5a5a5; display: flex; align-items: center; } @media screen and (width > 1024px) { .example__loans { justify-content: space-between; border-radius: 0 0 0.625rem 0.625rem; padding: 1.5rem; gap: 2rem; } } @media screen and (width <= 1024px) { .example__loans { border-radius: 0 0 2.0512820513vw 2.0512820513vw; padding: 6.1538461538vw 5.1282051282vw 8.2051282051vw; gap: 6.1538461538vw; flex-direction: column; } } .example__loan { width: 100%; position: relative; } @media screen and (width > 1024px) { .example__loan { max-width: 14.0625rem; } } @media screen and (width <= 1024px) { .example__loan { max-width: 79.4871794872vw; display: grid; grid-template-columns: auto 1fr; } } .example__loan:not(:nth-last-of-type(-n + 2))::after { content: "+"; font-family: var(--font-awesome); font-weight: bold; color: #888; position: absolute; } @media screen and (width > 1024px) { .example__loan:not(:nth-last-of-type(-n + 2))::after { font-size: 1.25rem; top: 50%; transform: translateY(-50%); right: -1.5625rem; } } @media screen and (width <= 1024px) { .example__loan:not(:nth-last-of-type(-n + 2))::after { font-size: 3.3333333333vw; left: 50%; transform: translateX(-50%); bottom: -5.641025641vw; } } .example__loan-name { color: var(--cl-white); font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (width > 1024px) { .example__loan-name { font-size: 1.3125rem; padding-block: 0.75rem; } } @media screen and (width <= 1024px) { .example__loan-name { font-size: 12px; font-size: 3.0769230769vw; width: 30.5128205128vw; display: grid; place-content: center; } } .example__loan-name--a { background-color: #f19dae; } .example__loan-name--b { background-color: #a7d344; } .example__loan-name--c { background-color: #f4c138; } .example__loan-detail { background-color: var(--cl-white); display: grid; } @media screen and (width > 1024px) { .example__loan-detail { padding: 1rem 0.75rem; grid-template-columns: 1fr; } } @media screen and (width <= 1024px) { .example__loan-detail { padding: 4.1025641026vw; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: center; } } @media screen and (width > 1024px) { .example__loan-payment { font-size: 1.125rem; text-align: center; } } @media screen and (width <= 1024px) { .example__loan-payment { font-size: 13px; font-size: 3.3333333333vw; grid-column: 1/2; grid-row: 1/2; } } .example__loan-amount { font-weight: 700; } @media screen and (width > 1024px) { .example__loan-amount { font-size: 1.125rem; text-align: center; } } @media screen and (width <= 1024px) { .example__loan-amount { font-size: 14px; font-size: 3.5897435897vw; grid-column: 2/3; grid-row: 1/2; } } .example__loan-amount .-num { font-family: var(--font-montserrat); font-weight: 600; } @media screen and (width > 1024px) { .example__loan-amount .-num { font-size: 1.875rem; } } @media screen and (width <= 1024px) { .example__loan-amount .-num { font-size: 20px; font-size: 5.1282051282vw; } } .example__loan-dl { display: grid; } @media screen and (width > 1024px) { .example__loan-dl { align-items: center; grid-template-columns: auto auto auto auto; } } @media screen and (width <= 1024px) { .example__loan-dl { grid-column: 1/3; grid-row: 2/3; grid-template-columns: auto 1fr; } } .example__loan-dl dt { letter-spacing: 0.05em; } @media screen and (width > 1024px) { .example__loan-dl dt { font-size: 0.9375rem; } } @media screen and (width <= 1024px) { .example__loan-dl dt { font-size: 12px; font-size: 3.0769230769vw; } } .example__loan-dl dt::after { content: "…"; color: var(--cl-text); } .example__loan-dl dd { letter-spacing: 0.05em; } @media screen and (width > 1024px) { .example__loan-dl dd { font-size: 0.9375rem; } } @media screen and (width <= 1024px) { .example__loan-dl dd { font-size: 12px; font-size: 3.0769230769vw; } } @media screen and (width > 1024px) { .example__loan-dl dd:first-of-type { margin-right: 0.5rem; } } @media screen and (width <= 1024px) { .example__loan-dl dd:first-of-type { margin-right: 2.0512820513vw; } } .example__loan-dl--a dt { color: #e73a5d; } .example__loan-dl--b dt { color: #35a519; } .example__loan-dl--c dt { color: #e47405; } .example__loan-total { background-color: #3eccee; color: var(--cl-white); display: flex; align-items: center; justify-content: center; position: relative; } @media screen and (width > 1024px) { .example__loan-total { width: 11.875rem; border-radius: 0.625rem; padding-block: 1rem; gap: 0.5rem; flex-direction: column; } } @media screen and (width <= 1024px) { .example__loan-total { width: 100%; border-radius: 2.0512820513vw; padding-block: 1.0256410256vw; gap: 5.1282051282vw; } } .example__loan-total::before { content: ""; position: absolute; } @media screen and (width > 1024px) { .example__loan-total::before { background-color: #3eccee; clip-path: polygon(100% 0, 100% 100%, 0% 50%); width: 0.6875rem; height: 1.5625rem; top: 50%; left: -0.625rem; transform: translateY(-50%); } } @media screen and (width <= 1024px) { .example__loan-total::before { background-color: #3eccee; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 3.3333333333vw; height: 1.5384615385vw; top: -1.2820512821vw; left: 50%; transform: translateX(-50%); } } .example__loan-total-label { font-weight: 700; letter-spacing: 0.02em; } @media screen and (width > 1024px) { .example__loan-total-label { font-size: 1.3125rem; } } @media screen and (width <= 1024px) { .example__loan-total-label { font-size: 16px; font-size: 4.1025641026vw; } } .example__loan-total-amount { font-weight: 600; } @media screen and (width > 1024px) { .example__loan-total-amount { font-size: 1.5625rem; } } @media screen and (width <= 1024px) { .example__loan-total-amount { font-size: 21px; font-size: 5.3846153846vw; } } .example__loan-total-amount .-num { font-family: var(--font-montserrat); line-height: 1; } @media screen and (width > 1024px) { .example__loan-total-amount .-num { font-size: 2.1875rem; } } @media screen and (width <= 1024px) { .example__loan-total-amount .-num { font-size: 30px; font-size: 7.6923076923vw; } } .example__result { border-left: 2px solid #888; border-right: 2px solid #888; border-bottom: 2px solid #888; } @media screen and (width > 1024px) { .example__result { border-radius: 0 0 0.625rem 0.625rem; padding: 0.5rem 1.5rem 2rem; } } @media screen and (width <= 1024px) { .example__result { border-radius: 0 0 2.0512820513vw 2.0512820513vw; padding: 6.1538461538vw 5.1282051282vw 8.2051282051vw; } } .example__benefit { display: flex; justify-content: center; align-items: baseline; } @media screen and (width > 1024px) { .example__benefit { margin-bottom: 1rem; } } @media screen and (width <= 1024px) { .example__benefit { align-items: center; flex-direction: column; margin-bottom: 4.1025641026vw; } } .example__benefit-text { letter-spacing: 0.02em; font-weight: 700; } @media screen and (width > 1024px) { .example__benefit-text { font-size: 1.625rem; } } @media screen and (width <= 1024px) { .example__benefit-text { font-size: 18px; font-size: 4.6153846154vw; } } .example__benefit-amount { letter-spacing: 0.02em; font-weight: 700; background: linear-gradient(transparent 60%, #ffea00 80%, transparent 90%); } @media screen and (width > 1024px) { .example__benefit-amount { font-size: 1.625rem; } } @media screen and (width <= 1024px) { .example__benefit-amount { font-size: 18px; font-size: 4.6153846154vw; } } .example__benefit-amount .-em { color: var(--cl-accent); } @media screen and (width > 1024px) { .example__benefit-amount .-em { margin-inline: 1rem; } } .example__benefit-amount .-num { font-family: var(--font-montserrat); font-weight: 600; } @media screen and (width > 1024px) { .example__benefit-amount .-num { font-size: 3rem; } } @media screen and (width <= 1024px) { .example__benefit-amount .-num { font-size: 30px; font-size: 7.6923076923vw; } } @media screen and (width > 1024px) { .example__benefit-amount .-unit { font-size: 2rem; margin-left: 0.5rem; } } @media screen and (width <= 1024px) { .example__benefit-amount .-unit { font-size: 21px; font-size: 5.3846153846vw; margin-left: 2.0512820513vw; } } .example__freeloan-wrapper { display: grid; } @media screen and (width > 1024px) { .example__freeloan-wrapper { grid-template-columns: 1fr auto; } } @media screen and (width <= 1024px) { .example__freeloan-wrapper { grid-template-columns: 1fr; gap: 6.1538461538vw; } } .example__freeloan { display: grid; grid-template-columns: auto 1fr; } .example__freeloan-label { background-color: #38d3cc; color: var(--cl-white); text-align: center; font-weight: 700; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; flex-direction: column; } @media screen and (width > 1024px) { .example__freeloan-label { width: 12.5rem; font-size: 1.1875rem; } } @media screen and (width <= 1024px) { .example__freeloan-label { width: 30.7692307692vw; font-size: 12px; font-size: 3.0769230769vw; } } .example__freeloan-label .-en { font-family: var(--font-montserrat); } @media screen and (width > 1024px) { .example__freeloan-label .-en { font-size: 1.5rem; } } @media screen and (width <= 1024px) { .example__freeloan-label .-en { font-size: 14px; font-size: 3.5897435897vw; } } .example__freeloan-detail { background-color: var(--cl-white); display: flex; flex-direction: column; justify-content: center; } @media screen and (width > 1024px) { .example__freeloan-detail { padding: 1rem 1.5rem; } } @media screen and (width <= 1024px) { .example__freeloan-detail { padding: 4.1025641026vw 3.0769230769vw; } } .example__freeloan-payment { display: flex; align-items: center; letter-spacing: 0.05em; } @media screen and (width > 1024px) { .example__freeloan-payment { font-size: 1.125rem; gap: 0.5rem; } } @media screen and (width <= 1024px) { .example__freeloan-payment { font-size: 13px; font-size: 3.3333333333vw; gap: 0.5128205128vw; } } .example__freeloan-payment .-num { font-family: var(--font-montserrat); font-weight: 600; } @media screen and (width > 1024px) { .example__freeloan-payment .-num { font-size: 1.875rem; } } @media screen and (width <= 1024px) { .example__freeloan-payment .-num { font-size: 20px; font-size: 5.1282051282vw; } } .example__freeloan-payment .-unit { font-weight: 700; } @media screen and (width > 1024px) { .example__freeloan-payment .-unit { font-size: 1.375rem; margin-left: 0.25rem; } } @media screen and (width <= 1024px) { .example__freeloan-payment .-unit { font-size: 14px; font-size: 3.5897435897vw; } } .example__freeloan-list { display: flex; align-items: center; } @media screen and (width > 1024px) { .example__freeloan-list { gap: 1rem; } } @media screen and (width <= 1024px) { .example__freeloan-list { gap: 0 1.0256410256vw; flex-wrap: wrap; } } .example__freeloan-list li { letter-spacing: 0.05em; } @media screen and (width > 1024px) { .example__freeloan-list li { font-size: 1rem; } } @media screen and (width <= 1024px) { .example__freeloan-list li { font-size: 12px; font-size: 3.0769230769vw; } } .example__freeloan-dl { display: flex; align-items: center; } .example__freeloan-dl dt { color: #00a5a2; } .example__freeloan-dl dt::after { content: "…"; color: var(--cl-text); } .example__freeloan-total { background-color: #3eccee; color: var(--cl-white); display: flex; align-items: center; justify-content: center; position: relative; } @media screen and (width > 1024px) { .example__freeloan-total { width: 11.875rem; border-radius: 0.625rem; padding-block: 1rem; gap: 0.5rem; flex-direction: column; margin-left: 2rem; } } @media screen and (width <= 1024px) { .example__freeloan-total { border-radius: 2.0512820513vw; padding-block: 1.0256410256vw; gap: 5.1282051282vw; } } .example__freeloan-total::before { content: ""; position: absolute; } @media screen and (width > 1024px) { .example__freeloan-total::before { background-color: #3eccee; clip-path: polygon(100% 0, 100% 100%, 0% 50%); width: 0.6875rem; height: 1.5625rem; top: 50%; left: -0.625rem; transform: translateY(-50%); } } @media screen and (width <= 1024px) { .example__freeloan-total::before { background-color: #3eccee; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 3.3333333333vw; height: 1.5384615385vw; top: -1.2820512821vw; left: 50%; transform: translateX(-50%); } } .example__freeloan-total-label { font-weight: 700; letter-spacing: 0.02em; } @media screen and (width > 1024px) { .example__freeloan-total-label { font-size: 1.3125rem; } } @media screen and (width <= 1024px) { .example__freeloan-total-label { font-size: 16px; font-size: 4.1025641026vw; } } .example__freeloan-total-amount { font-weight: 600; } @media screen and (width > 1024px) { .example__freeloan-total-amount { font-size: 1.5625rem; } } @media screen and (width <= 1024px) { .example__freeloan-total-amount { font-size: 21px; font-size: 5.3846153846vw; } } .example__freeloan-total-amount .-num { font-family: var(--font-montserrat); line-height: 1; } @media screen and (width > 1024px) { .example__freeloan-total-amount .-num { font-size: 2.1875rem; } } @media screen and (width <= 1024px) { .example__freeloan-total-amount .-num { font-size: 30px; font-size: 7.6923076923vw; } } .example__note { letter-spacing: 0.05em; position: relative; } @media screen and (width > 750px) { .example__note { font-size: 0.6875rem; margin-top: 0.5rem; padding-left: 1rem; } } @media screen and (width <= 750px) { .example__note { font-size: 11px; font-size: 2.8205128205vw; margin-top: 4.1025641026vw; padding-left: 4.1025641026vw; } } .example__note::before { content: "※"; position: absolute; top: 0; left: 0; } @media screen and (width > 750px) { .simulation__head { margin-bottom: 3.5rem; } } @media screen and (width <= 750px) { .simulation__head { margin-bottom: 6.1538461538vw; } } .simulation__inner { width: calc(100% - 40px); max-width: 62.5rem; margin-inline: auto; } @media screen and (width > 750px) { .simulation__inner { padding-block: 6.5rem; } } @media screen and (width <= 750px) { .simulation__inner { padding-block: 4rem; } } .simulation__subtitle { display: flex; align-items: center; justify-content: center; color: var(--cl-primary); font-weight: 700; letter-spacing: 0.05em; } @media screen and (width > 750px) { .simulation__subtitle { gap: 1rem; font-size: 1.3125rem; margin-bottom: 2.625rem; } } @media screen and (width <= 750px) { .simulation__subtitle { gap: 4.1025641026vw; font-size: 16px; font-size: 4.1025641026vw; margin-bottom: 6.1538461538vw; } } .simulation__subtitle::before, .simulation__subtitle::after { content: ""; display: block; width: 1px; height: 1.3125rem; border-left: var(--cl-primary) 1px solid; } .simulation__subtitle::before { transform: rotate(-45deg); } .simulation__subtitle::after { transform: rotate(45deg); } .simulation__form { display: flex; flex-direction: column; width: 100%; margin-inline: auto; } @media screen and (width > 750px) { .simulation__form { max-width: 38.75rem; gap: 2rem; } } @media screen and (width <= 750px) { .simulation__form { gap: 6.1538461538vw; } } .simulation__label { display: block; background-color: var(--cl-secondary); color: var(--cl-white); font-weight: 700; letter-spacing: 0.05em; } @media screen and (width > 750px) { .simulation__label { border-radius: 0.375rem; font-size: 1.125rem; padding: 0.5rem 1.25rem; margin-bottom: 1rem; } } @media screen and (width <= 750px) { .simulation__label { border-radius: 1.0256410256vw; font-size: 16px; font-size: 4.1025641026vw; padding: 2.0512820513vw 4.1025641026vw; margin-bottom: 4.1025641026vw; } } @media screen and (width > 750px) { .simulation__label:has(+ .simulation__note) { margin-bottom: 0.5rem; } } @media screen and (width <= 750px) { .simulation__label:has(+ .simulation__note) { margin-bottom: 4.1025641026vw; } } .simulation__note { letter-spacing: 0.04em; line-height: 1.8; } @media screen and (width > 750px) { .simulation__note { font-size: 0.9375rem; margin-bottom: 0.5rem; } } @media screen and (width <= 750px) { .simulation__note { font-size: 14px; font-size: 3.5897435897vw; margin-bottom: 4.1025641026vw; } } @media screen and (width > 750px) { .simulation__input { width: 8.25rem; font-size: 1.125rem; } } @media screen and (width <= 750px) { .simulation__input { width: 25.641025641vw; font-size: 16px; font-size: 4.1025641026vw; } } .simulation__unit { display: inline-block; letter-spacing: 0.05em; } @media screen and (width > 750px) { .simulation__unit { font-size: 1.125rem; margin-left: 0.5rem; } } @media screen and (width <= 750px) { .simulation__unit { font-size: 16px; font-size: 4.1025641026vw; margin-left: 2.0512820513vw; } } .simulation__select-wrapper { position: relative; width: -moz-fit-content; width: fit-content; } .simulation__select-wrapper::after { content: "\f078"; font-family: var(--font-awesome); font-weight: 900; color: var(--cl-white); background-color: #888; display: grid; place-content: center; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; pointer-events: none; } @media screen and (width > 750px) { .simulation__select-wrapper::after { border-radius: 0 0.375rem 0.375rem 0; width: 2.625rem; font-size: 1rem; } } @media screen and (width <= 750px) { .simulation__select-wrapper::after { border-radius: 0 1.0256410256vw 1.0256410256vw 0; width: 8.2051282051vw; font-size: 4.1025641026vw; } } @media screen and (width > 750px) { .simulation__select { width: 14.375rem; } } @media screen and (width <= 750px) { .simulation__select { width: 44.8717948718vw; } } .simulation__radio-wrapper { display: flex; } @media screen and (width > 750px) { .simulation__radio-wrapper { align-items: center; justify-content: space-between; } } @media screen and (width <= 750px) { .simulation__radio-wrapper { gap: 4.1025641026vw; flex-direction: column; } } .simulation__radio-group { display: flex; align-items: center; } .simulation__radio-label { display: flex; align-items: center; } @media screen and (width > 750px) { .simulation__radio-label { font-size: 1.125rem; } } @media screen and (width <= 750px) { .simulation__radio-label { font-size: 16px; font-size: 4.1025641026vw; } } @media screen and (width > 750px) { .simulation__radio-label + .simulation__input { margin-left: 0.5rem; } } @media screen and (width <= 750px) { .simulation__radio-label + .simulation__input { margin-left: 2.0512820513vw; } } @media screen and (width > 750px) { .simulation__radio { width: 1.25rem; height: 1.25rem; margin-right: 1.5rem; } } @media screen and (width <= 750px) { .simulation__radio { width: 4.6153846154vw; height: 4.6153846154vw; margin-right: 2.0512820513vw; } } .simulation__btn { margin-inline: auto; letter-spacing: 0.05em; font-weight: 700; position: relative; } .simulation__btn:after { content: "\f054"; font-family: var(--font-awesome); font-weight: bold; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (width > 750px) { .simulation__btn:after { right: 1rem; } } @media screen and (width <= 750px) { .simulation__btn:after { right: 4.1025641026vw; } } @media screen and (width > 750px) { .simulation__btn { font-size: 1.3125rem; max-width: 28.75rem; padding-block: 1rem; } } @media screen and (width <= 750px) { .simulation__btn { font-size: 16px; font-size: 4.1025641026vw; max-width: 89.7435897436vw; padding-block: 4.1025641026vw; } } .simulation__btn::after { content: "\f078"; font-family: var(--font-awesome); font-weight: bold; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (width > 750px) { .simulation__btn::after { right: 1.5rem; } } @media screen and (width <= 750px) { .simulation__btn::after { right: 4.1025641026vw; } } .simulation__result { border: var(--cl-tertiary) 1px solid; } @media screen and (width > 750px) { .simulation__result { border-radius: 0.5rem; margin-top: 2.5rem; } } @media screen and (width <= 750px) { .simulation__result { border-radius: 2.0512820513vw; margin-top: 10.2564102564vw; } } .simulation__result-title { background-color: var(--cl-tertiary); font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (width > 750px) { .simulation__result-title { font-size: 1.3125rem; padding-block: 0.5rem; border-radius: 0.5rem 0.5rem 0 0; } } @media screen and (width <= 750px) { .simulation__result-title { font-size: 16px; font-size: 4.1025641026vw; padding: 3.0769230769vw 4.1025641026vw; } } .simulation__result-inner { display: grid; } @media screen and (width > 750px) { .simulation__result-inner { grid-template-columns: repeat(2, 1fr); padding-block: 1rem 1.25rem; } } @media screen and (width <= 750px) { .simulation__result-inner { grid-template-columns: 1fr; padding-inline: 6.1538461538vw; } } .simulation__result-item { display: flex; align-items: center; } @media screen and (width > 750px) { .simulation__result-item { flex-direction: column; gap: 0.5rem; } } @media screen and (width <= 750px) { .simulation__result-item { flex-direction: row; gap: 4.1025641026vw; justify-content: space-between; padding: 4.1025641026vw 2.0512820513vw; } } @media screen and (width > 750px) { .simulation__result-item:not(:last-of-type) { border-right: var(--cl-tertiary) 1px solid; } } @media screen and (width <= 750px) { .simulation__result-item:not(:last-of-type) { border-bottom: var(--cl-tertiary) 1px solid; } } .simulation__result-label { letter-spacing: 0.05em; } @media screen and (width > 750px) { .simulation__result-label { font-size: 1.125rem; } } @media screen and (width <= 750px) { .simulation__result-label { font-size: 14px; font-size: 3.5897435897vw; } } .simulation__result-value { font-weight: 700; } @media screen and (width > 750px) { .simulation__result-value { font-size: 1.25rem; } } @media screen and (width <= 750px) { .simulation__result-value { font-size: 14px; font-size: 3.5897435897vw; flex-shrink: 0; } } .simulation__result-value .-num { font-family: var(--font-montserrat); } @media screen and (width > 750px) { .simulation__result-value .-num { font-size: 1.75rem; } } @media screen and (width <= 750px) { .simulation__result-value .-num { font-size: 20px; font-size: 5.1282051282vw; } } .simulation__dl { border: 1px solid #dedede; } @media screen and (width > 750px) { .simulation__dl { border-radius: 0.5rem; padding: 1.5rem; margin-top: 2.5rem; } } @media screen and (width <= 750px) { .simulation__dl { border-radius: 2.0512820513vw; padding: 6.1538461538vw; margin-top: 10.2564102564vw; } } .simulation__dl dt { display: flex; align-items: center; justify-content: space-between; color: #16335c; letter-spacing: 0.05em; font-weight: 700; cursor: pointer; } @media screen and (width > 750px) { .simulation__dl dt { font-size: 1.125rem; } } @media screen and (width <= 750px) { .simulation__dl dt { font-size: 16px; font-size: 4.1025641026vw; } } .simulation__dl dt i { color: var(--cl-primary); } @media screen and (width > 750px) { .simulation__dl dt i { font-size: 1.625rem; } } @media screen and (width <= 750px) { .simulation__dl dt i { font-size: 4.1025641026vw; } } .simulation__dl dd { letter-spacing: 0.04em; line-height: 1.8; border-top: #dedede 1px solid; display: none; position: relative; } @media screen and (width > 750px) { .simulation__dl dd { font-size: 0.9375rem; margin-top: 1rem; padding-top: 1rem; } } @media screen and (width <= 750px) { .simulation__dl dd { font-size: 14px; font-size: 3.5897435897vw; margin-top: 6.1538461538vw; padding-top: 6.1538461538vw; } } .simulation__list li { position: relative; letter-spacing: 0.04em; line-height: 1.8; } @media screen and (width > 750px) { .simulation__list li { font-size: 0.9375rem; padding-left: 1.125rem; } } @media screen and (width <= 750px) { .simulation__list li { font-size: 14px; font-size: 3.5897435897vw; padding-left: 3.5897435897vw; } } .simulation__list li::before { content: "※"; position: absolute; top: 0; left: 0; } @media screen and (width > 750px) { .step__head { margin-bottom: 4.875rem; } } @media screen and (width <= 750px) { .step__head { margin-bottom: 6.1538461538vw; } } .step__inner { width: calc(100% - 40px); max-width: 62.5rem; margin-inline: auto; } @media screen and (width > 1024px) { .step__inner { padding-block: 6.5rem; } } @media screen and (width <= 1024px) { .step__inner { padding-block: 4rem; } } .step__steps { display: grid; } @media screen and (width > 1024px) { .step__steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; } } @media screen and (width <= 1024px) { .step__steps { grid-template-columns: 1fr; gap: 12.3076923077vw; } } .step__step { display: grid; align-items: center; border: #084198 1px solid; position: relative; } @media screen and (width > 1024px) { .step__step { justify-content: center; grid-template-rows: subgrid; grid-row: span 2; gap: 1.5rem; border-radius: 0.75rem; padding-block: 2rem 2.5rem; } } @media screen and (width <= 1024px) { .step__step { grid-template-columns: auto 1fr; grid-template-rows: 1fr; grid-template-areas: "step-img step-title"; gap: 2.0512820513vw 6.1538461538vw; border-radius: 2.0512820513vw; padding: 4.1025641026vw; } } @media screen and (width <= 1024px) { .step__step:has(.step__step-label) { grid-template-rows: 1fr 1fr; grid-template-areas: "step-img step-label" "step-img step-title"; } } .step__step:has(.step__step-label) .step__step-title { margin-bottom: auto; } .step__step:not(:last-child)::after { content: ""; display: block; position: absolute; } @media screen and (width > 1024px) { .step__step:not(:last-child)::after { width: 0.875rem; height: 2.625rem; background-color: rgba(204, 204, 204, 0.8); clip-path: polygon(0 0, 0% 100%, 100% 50%); top: 50%; right: -1.625rem; transform: translateY(-50%); } } @media screen and (width <= 1024px) { .step__step:not(:last-child)::after { width: 11.2820512821vw; height: 4.1025641026vw; background-color: rgba(204, 204, 204, 0.8); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); bottom: -8.2051282051vw; left: 50%; transform: translateX(-50%); } } .step__step-label { display: flex; align-items: center; justify-content: center; width: -moz-fit-content; width: fit-content; background-color: var(--cl-tertiary); border-radius: 9999px; color: var(--cl-primary); font-weight: 700; font-family: var(--font-montserrat); line-height: 1; } @media screen and (width > 1024px) { .step__step-label { gap: 0.375rem; font-size: 1.125rem; padding: 0.25rem 0.75rem; position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%); } } @media screen and (width <= 1024px) { .step__step-label { grid-area: step-label; gap: 1.0256410256vw; font-size: 13px; font-size: 3.3333333333vw; padding: 0.5128205128vw 2.0512820513vw; margin-top: auto; } } @media screen and (width > 1024px) { .step__step-label .-num { font-size: 1.25rem; } } @media screen and (width <= 1024px) { .step__step-label .-num { font-size: 16px; font-size: 4.1025641026vw; } } .step__step-title { color: var(--cl-primary); letter-spacing: 0.05em; font-weight: 700; } @media screen and (width > 1024px) { .step__step-title { font-size: 1.25rem; text-align: center; } } @media screen and (width <= 1024px) { .step__step-title { grid-area: step-title; font-size: 17px; font-size: 4.358974359vw; } } @media screen and (width > 1024px) { .step__step-img { width: 5.875rem; height: 5.875rem; margin-inline: auto; } } @media screen and (width <= 1024px) { .step__step-img { grid-area: step-img; width: 17.9487179487vw; height: 17.9487179487vw; } } .step__step-img img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .step__step-img01 { position: absolute; } @media screen and (width > 1024px) { .step__step-img01 { width: 8.375rem; height: 7.5625rem; bottom: -0.5rem; left: -5rem; } } @media screen and (width <= 1024px) { .step__step-img01 { width: 25.3846153846vw; height: 19.4871794872vw; top: 50%; transform: translateY(-50%); right: 5.641025641vw; } } .step__step-img01 img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .step__dl { border: 1px solid #dedede; } @media screen and (width > 750px) { .step__dl { border-radius: 0.5rem; padding: 1.5rem; margin-top: 2.5rem; } } @media screen and (width <= 750px) { .step__dl { border-radius: 2.0512820513vw; padding: 6.1538461538vw; margin-top: 16.6666666667vw; } } .step__dl dt { display: flex; align-items: center; justify-content: space-between; color: #16335c; letter-spacing: 0.05em; font-weight: 700; cursor: pointer; } @media screen and (width > 750px) { .step__dl dt { font-size: 1.125rem; padding-inline: 1rem; } } @media screen and (width <= 750px) { .step__dl dt { font-size: 16px; font-size: 4.1025641026vw; padding-inline: 1.0256410256vw; } } .step__dl dt i { color: var(--cl-primary); } @media screen and (width > 750px) { .step__dl dt i { font-size: 1.625rem; } } @media screen and (width <= 750px) { .step__dl dt i { font-size: 4.1025641026vw; } } .step__dl dd { letter-spacing: 0.04em; line-height: 1.8; border-top: #dedede 1px solid; display: none; position: relative; } @media screen and (width > 750px) { .step__dl dd { font-size: 0.9375rem; margin-top: 1rem; padding: 1rem 1rem 0; } } @media screen and (width <= 750px) { .step__dl dd { font-size: 14px; font-size: 3.5897435897vw; margin-top: 6.1538461538vw; padding: 6.1538461538vw 1.0256410256vw 0; } } @media screen and (width <= 750px) { .step__text-wrapper { display: grid; grid-template-areas: "text01" "tel" "text02"; } } @media screen and (width > 750px) { .step__text:not(:last-of-type) { margin-bottom: 1rem; } } @media screen and (width <= 750px) { .step__text:not(:last-of-type) { margin-bottom: 4.1025641026vw; } } .step__text--01 { grid-area: text01; } .step__text--02 { grid-area: text02; } .step__tel { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; } @media screen and (width > 750px) { .step__tel { gap: 0.5rem; position: absolute; bottom: 0; right: 3.4375rem; max-width: 17.5rem; } } @media screen and (width <= 750px) { .step__tel { grid-area: tel; gap: 2.0512820513vw; max-width: 71.7948717949vw; margin-bottom: 4.1025641026vw; } } .step__tel-label { display: flex; align-items: center; justify-content: center; line-height: 1.3; color: var(--cl-primary); } @media screen and (width > 750px) { .step__tel-label { gap: 0.5rem; font-size: 0.75rem; } } @media screen and (width <= 750px) { .step__tel-label { gap: 2.0512820513vw; font-size: 12px; font-size: 3.0769230769vw; } } .step__tel-label::before, .step__tel-label::after { content: ""; display: block; width: 1px; border-left: var(--cl-primary) 1px solid; } @media screen and (width > 750px) { .step__tel-label::before, .step__tel-label::after { height: 0.75rem; } } @media screen and (width <= 750px) { .step__tel-label::before, .step__tel-label::after { height: 3.0769230769vw; } } .step__tel-label::before { transform: rotate(-45deg); } .step__tel-label::after { transform: rotate(45deg); } .step__tel-button { letter-spacing: 0.05em; } @media screen and (width > 750px) { .step__tel-button { font-size: 1.125rem; padding: 0.5rem; max-width: 17.5rem; } } @media screen and (width <= 750px) { .step__tel-button { font-size: 18px; font-size: 4.6153846154vw; padding: 2.0512820513vw; max-width: 71.7948717949vw; } } .step__tel-button::before { content: ""; display: block; background-image: url("../img/page/icon_phone.svg"); background-size: contain; background-repeat: no-repeat; } @media screen and (width > 750px) { .step__tel-button::before { width: 0.625rem; height: 1.25rem; transform: translateY(2px); } } @media screen and (width <= 750px) { .step__tel-button::before { width: 2.5641025641vw; height: 5.1282051282vw; transform: translateY(2px); } } .step__tel-button::after { content: "\f054"; font-family: var(--font-awesome); font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (width > 750px) { .step__tel-button::after { right: 1.5rem; } } @media screen and (width <= 750px) { .step__tel-button::after { right: 6.1538461538vw; } } .faq { background-color: var(--cl-primary); } @media screen and (width > 750px) { .faq__head { margin-bottom: 2.5rem; } } @media screen and (width <= 750px) { .faq__head { margin-bottom: 6.1538461538vw; } } .faq__inner { width: calc(100% - 40px); max-width: 62.5rem; margin-inline: auto; } @media screen and (width > 750px) { .faq__inner { padding-block: 6.5rem; } } @media screen and (width <= 750px) { .faq__inner { padding-block: 4rem; } } .faq__list { display: flex; flex-direction: column; } @media screen and (width > 750px) { .faq__list { gap: 1rem; } } @media screen and (width <= 750px) { .faq__list { gap: 4.1025641026vw; } } .faq__item { background-color: var(--cl-white); } @media screen and (width > 750px) { .faq__item { border-radius: 1.5rem; padding: 1.5rem; } } @media screen and (width <= 750px) { .faq__item { border-radius: 2.0512820513vw; padding: 6.1538461538vw 5.1282051282vw; } } .faq__q { display: flex; align-items: center; cursor: pointer; font-weight: 700; letter-spacing: 0.05em; } @media screen and (width > 750px) { .faq__q { gap: 1rem; font-size: 1.125rem; padding-inline: 1rem; } } @media screen and (width <= 750px) { .faq__q { gap: 4.1025641026vw; font-size: 14px; font-size: 3.5897435897vw; padding-inline: 1.0256410256vw; } } .faq__q::before { flex-shrink: 0; content: "Q"; font-family: var(--font-montserrat); font-weight: 700; color: var(--cl-primary); border-radius: 50%; background-color: #e7f1f7; display: grid; place-items: center; } @media screen and (width > 750px) { .faq__q::before { font-size: 1rem; width: 2.375rem; height: 2.375rem; } } @media screen and (width <= 750px) { .faq__q::before { font-size: 14px; font-size: 3.5897435897vw; width: 8.2051282051vw; height: 8.2051282051vw; } } .faq__q i { margin-left: auto; color: #b8b8b8; } .faq__a { border-top: #dedede 1px solid; display: none; letter-spacing: 0.05em; font-weight: 500; } @media screen and (width > 750px) { .faq__a { margin-top: 1rem; padding-top: 1rem; font-size: 0.9375rem; padding-inline: 1rem; } } @media screen and (width <= 750px) { .faq__a { margin-top: 4.1025641026vw; padding-top: 4.1025641026vw; font-size: 14px; font-size: 3.5897435897vw; padding-inline: 1.0256410256vw; } } .faq__note { letter-spacing: 0.04em; position: relative; } @media screen and (width > 750px) { .faq__note { font-size: 0.6875rem; margin-top: 0.5rem; padding-left: 1rem; } } @media screen and (width <= 750px) { .faq__note { font-size: 11px; font-size: 2.8205128205vw; margin-top: 4.1025641026vw; padding-left: 4.1025641026vw; } } .faq__note::before { content: "※"; position: absolute; left: 0; } @media screen and (width > 750px) { .product__head { margin-bottom: 2.5rem; } } @media screen and (width <= 750px) { .product__head { margin-bottom: 6.1538461538vw; } } .product__inner { width: calc(100% - 40px); max-width: 62.5rem; margin-inline: auto; } @media screen and (width > 750px) { .product__inner { padding-block: 6.5rem; } } @media screen and (width <= 750px) { .product__inner { padding-block: 4rem; } } .product__table { width: 100%; border-collapse: collapse; } .product__table th, .product__table td { letter-spacing: 0.04em; text-align: left; vertical-align: middle; line-height: 1.8; } @media screen and (width > 750px) { .product__table th, .product__table td { border: 1px solid #e6e6e6; padding: 1.5rem; font-size: 0.9375rem; } } @media screen and (width <= 750px) { .product__table th, .product__table td { display: block; width: 100%; padding: 4.1025641026vw; font-size: 14px; font-size: 3.5897435897vw; } } .product__table th { background-color: #f2f2f2; font-weight: 700; } @media screen and (width > 750px) { .product__table th { width: 11.875rem; } } @media screen and (width <= 750px) { .product__table th { width: 100%; font-size: 16px; font-size: 4.1025641026vw; } } .product__list li { position: relative; } @media screen and (width > 750px) { .product__list li { padding-left: 1rem; } } @media screen and (width <= 750px) { .product__list li { padding-left: 4.1025641026vw; } } .product__list li::before { content: "•"; position: absolute; left: 0; } .product__note { position: relative; } @media screen and (width > 750px) { .product__note { font-size: 0.6875rem; padding-left: 1rem; } } @media screen and (width <= 750px) { .product__note { font-size: 11px; font-size: 2.8205128205vw; padding-left: 4.1025641026vw; } } .product__note::before { content: "※"; position: absolute; left: 0; } .product__dl { border: 1px solid #dedede; } @media screen and (width > 750px) { .product__dl { border-radius: 0.5rem; padding: 1.5rem; margin-top: 2.5rem; } } @media screen and (width <= 750px) { .product__dl { border-radius: 2.0512820513vw; padding: 6.1538461538vw; margin-top: 10.2564102564vw; } } .product__dl dt { display: flex; align-items: center; justify-content: space-between; color: #16335c; letter-spacing: 0.05em; font-weight: 700; cursor: pointer; } @media screen and (width > 750px) { .product__dl dt { font-size: 1.125rem; padding-inline: 1rem; } } @media screen and (width <= 750px) { .product__dl dt { font-size: 16px; font-size: 4.1025641026vw; padding-inline: 1.0256410256vw; } } .product__dl dt i { color: var(--cl-primary); } @media screen and (width > 750px) { .product__dl dt i { font-size: 1.625rem; } } @media screen and (width <= 750px) { .product__dl dt i { font-size: 4.1025641026vw; } } .product__dl dd { letter-spacing: 0.04em; line-height: 1.8; border-top: #dedede 1px solid; display: none; } @media screen and (width > 750px) { .product__dl dd { font-size: 0.9375rem; margin-top: 1rem; padding: 1rem 1rem 0; } } @media screen and (width <= 750px) { .product__dl dd { font-size: 14px; font-size: 3.5897435897vw; margin-top: 6.1538461538vw; padding: 6.1538461538vw 1.0256410256vw 0; } } .product__caution-list li { position: relative; } @media screen and (width > 750px) { .product__caution-list li { padding-left: 1rem; } } @media screen and (width <= 750px) { .product__caution-list li { padding-left: 4.1025641026vw; } } .product__caution-list li::before { content: "・"; position: absolute; left: 0; } /* --------------------------------------- Margin -----------------------------------------*/ .u-mt00 { margin-top: 0px !important; } .u-mt01 { margin-top: 1px !important; } .u-mt02 { margin-top: 2px !important; } .u-mt03 { margin-top: 3px !important; } .u-mt04 { margin-top: 4px !important; } .u-mt05 { margin-top: 5px !important; } .u-mt06 { margin-top: 6px !important; } .u-mt07 { margin-top: 7px !important; } .u-mt08 { margin-top: 8px !important; } .u-mt09 { margin-top: 9px !important; } .u-mt10 { margin-top: 10px !important; } .u-mt11 { margin-top: 11px !important; } .u-mt12 { margin-top: 12px !important; } .u-mt13 { margin-top: 13px !important; } .u-mt14 { margin-top: 14px !important; } .u-mt15 { margin-top: 15px !important; } .u-mt16 { margin-top: 16px !important; } .u-mt17 { margin-top: 17px !important; } .u-mt18 { margin-top: 18px !important; } .u-mt19 { margin-top: 19px !important; } .u-mt20 { margin-top: 20px !important; } .u-mt25 { margin-top: 25px !important; } .u-mt30 { margin-top: 30px !important; } .u-mt35 { margin-top: 35px !important; } .u-mt40 { margin-top: 40px !important; } .u-mt45 { margin-top: 45px !important; } .u-mt50 { margin-top: 50px !important; } .u-mt55 { margin-top: 55px !important; } .u-mt60 { margin-top: 60px !important; } .u-mt65 { margin-top: 65px !important; } .u-mt70 { margin-top: 70px !important; } .u-mt75 { margin-top: 75px !important; } .u-mt80 { margin-top: 80px !important; } .u-mt85 { margin-top: 85px !important; } .u-mt90 { margin-top: 90px !important; } .u-mt95 { margin-top: 95px !important; } .u-mt100 { margin-top: 100px !important; } .u-mr00 { margin-right: 0 !important; } .u-mr01 { margin-right: 1px !important; } .u-mr02 { margin-right: 2px !important; } .u-mr03 { margin-right: 3px !important; } .u-mr04 { margin-right: 4px !important; } .u-mr05 { margin-right: 5px !important; } .u-mr06 { margin-right: 6px !important; } .u-mr07 { margin-right: 7px !important; } .u-mr08 { margin-right: 8px !important; } .u-mr09 { margin-right: 9px !important; } .u-mr10 { margin-right: 10px !important; } .u-mr11 { margin-right: 11px !important; } .u-mr12 { margin-right: 12px !important; } .u-mr13 { margin-right: 13px !important; } .u-mr14 { margin-right: 14px !important; } .u-mr15 { margin-right: 15px !important; } .u-mr16 { margin-right: 16px !important; } .u-mr17 { margin-right: 17px !important; } .u-mr18 { margin-right: 18px !important; } .u-mr19 { margin-right: 19px !important; } .u-mr20 { margin-right: 20px !important; } .u-mr25 { margin-right: 25px !important; } .u-mr30 { margin-right: 30px !important; } .u-mr35 { margin-right: 35px !important; } .u-mr40 { margin-right: 40px !important; } .u-mr45 { margin-right: 45px !important; } .u-mr50 { margin-right: 50px !important; } .u-mr55 { margin-right: 55px !important; } .u-mr60 { margin-right: 60px !important; } .u-mr65 { margin-right: 65px !important; } .u-mr70 { margin-right: 70px !important; } .u-mr75 { margin-right: 75px !important; } .u-mr80 { margin-right: 80px !important; } .u-mr85 { margin-right: 85px !important; } .u-mr90 { margin-right: 90px !important; } .u-mr95 { margin-right: 95px !important; } .u-mr100 { margin-right: 100px !important; } .u-mb00 { margin-bottom: 0px !important; } .u-mb01 { margin-bottom: 1px !important; } .u-mb02 { margin-bottom: 2px !important; } .u-mb03 { margin-bottom: 3px !important; } .u-mb04 { margin-bottom: 4px !important; } .u-mb05 { margin-bottom: 5px !important; } .u-mb06 { margin-bottom: 6px !important; } .u-mb07 { margin-bottom: 7px !important; } .u-mb08 { margin-bottom: 8px !important; } .u-mb09 { margin-bottom: 9px !important; } .u-mb10 { margin-bottom: 10px !important; } .u-mb11 { margin-bottom: 11px !important; } .u-mb12 { margin-bottom: 12px !important; } .u-mb13 { margin-bottom: 13px !important; } .u-mb14 { margin-bottom: 14px !important; } .u-mb15 { margin-bottom: 15px !important; } .u-mb16 { margin-bottom: 16px !important; } .u-mb17 { margin-bottom: 17px !important; } .u-mb18 { margin-bottom: 18px !important; } .u-mb19 { margin-bottom: 19px !important; } .u-mb20 { margin-bottom: 20px !important; } .u-mb25 { margin-bottom: 25px !important; } .u-mb30 { margin-bottom: 30px !important; } .u-mb35 { margin-bottom: 35px !important; } .u-mb40 { margin-bottom: 40px !important; } .u-mb45 { margin-bottom: 45px !important; } .u-mb50 { margin-bottom: 50px !important; } .u-mb55 { margin-bottom: 55px !important; } .u-mb60 { margin-bottom: 60px !important; } .u-mb65 { margin-bottom: 65px !important; } .u-mb70 { margin-bottom: 70px !important; } .u-mb75 { margin-bottom: 75px !important; } .u-mb80 { margin-bottom: 80px !important; } .u-mb85 { margin-bottom: 85px !important; } .u-mb90 { margin-bottom: 90px !important; } .u-mb95 { margin-bottom: 95px !important; } .u-mb100 { margin-bottom: 100px !important; } .u-mb150 { margin-bottom: 150px !important; } .u-ml00 { margin-left: 0px !important; } .u-ml01 { margin-left: 1px !important; } .u-ml02 { margin-left: 2px !important; } .u-ml03 { margin-left: 3px !important; } .u-ml04 { margin-left: 4px !important; } .u-ml05 { margin-left: 5px !important; } .u-ml06 { margin-left: 6px !important; } .u-ml07 { margin-left: 7px !important; } .u-ml08 { margin-left: 8px !important; } .u-ml09 { margin-left: 9px !important; } .u-ml10 { margin-left: 10px !important; } .u-ml11 { margin-left: 11px !important; } .u-ml12 { margin-left: 12px !important; } .u-ml13 { margin-left: 13px !important; } .u-ml14 { margin-left: 14px !important; } .u-ml15 { margin-left: 15px !important; } .u-ml16 { margin-left: 16px !important; } .u-ml17 { margin-left: 17px !important; } .u-ml18 { margin-left: 18px !important; } .u-ml19 { margin-left: 19px !important; } .u-ml20 { margin-left: 20px !important; } .u-ml25 { margin-left: 25px !important; } .u-ml30 { margin-left: 30px !important; } .u-ml35 { margin-left: 35px !important; } .u-ml40 { margin-left: 40px !important; } .u-ml45 { margin-left: 45px !important; } .u-ml50 { margin-left: 50px !important; } .u-ml55 { margin-left: 55px !important; } .u-ml60 { margin-left: 60px !important; } .u-ml65 { margin-left: 65px !important; } .u-ml70 { margin-left: 70px !important; } .u-ml75 { margin-left: 75px !important; } .u-ml80 { margin-left: 80px !important; } .u-ml85 { margin-left: 85px !important; } .u-ml90 { margin-left: 90px !important; } .u-ml95 { margin-left: 95px !important; } .u-ml100 { margin-left: 100px !important; } .u-ma00 { margin: 0px !important; } .u-ma01 { margin: 1px !important; } .u-ma02 { margin: 2px !important; } .u-ma03 { margin: 3px !important; } .u-ma04 { margin: 4px !important; } .u-ma05 { margin: 5px !important; } .u-ma06 { margin: 6px !important; } .u-ma07 { margin: 7px !important; } .u-ma08 { margin: 8px !important; } .u-ma09 { margin: 9px !important; } .u-ma10 { margin: 10px !important; } .u-ma11 { margin: 11px !important; } .u-ma12 { margin: 12px !important; } .u-ma13 { margin: 13px !important; } .u-ma14 { margin: 14px !important; } .u-ma15 { margin: 15px !important; } .u-ma16 { margin: 16px !important; } .u-ma17 { margin: 17px !important; } .u-ma18 { margin: 18px !important; } .u-ma19 { margin: 19px !important; } .u-ma20 { margin: 20px !important; } .u-ma25 { margin: 25px !important; } .u-ma30 { margin: 30px !important; } .u-ma35 { margin: 35px !important; } .u-ma40 { margin: 40px !important; } .u-ma45 { margin: 45px !important; } .u-ma50 { margin: 50px !important; } .u-ma55 { margin: 55px !important; } .u-ma60 { margin: 60px !important; } .u-ma65 { margin: 65px !important; } .u-ma70 { margin: 70px !important; } .u-ma75 { margin: 75px !important; } .u-ma80 { margin: 80px !important; } .u-ma85 { margin: 85px !important; } .u-ma90 { margin: 90px !important; } .u-ma95 { margin: 95px !important; } .u-ma100 { margin: 100px !important; } /* --------------------------------------- Padding -----------------------------------------*/ .u-pt00 { padding-top: 0px !important; } .u-pt01 { padding-top: 1px !important; } .u-pt02 { padding-top: 2px !important; } .u-pt03 { padding-top: 3px !important; } .u-pt04 { padding-top: 4px !important; } .u-pt05 { padding-top: 5px !important; } .u-pt06 { padding-top: 6px !important; } .u-pt07 { padding-top: 7px !important; } .u-pt08 { padding-top: 8px !important; } .u-pt09 { padding-top: 9px !important; } .u-pt10 { padding-top: 10px !important; } .u-pt11 { padding-top: 11px !important; } .u-pt12 { padding-top: 12px !important; } .u-pt13 { padding-top: 13px !important; } .u-pt14 { padding-top: 14px !important; } .u-pt15 { padding-top: 15px !important; } .u-pt16 { padding-top: 16px !important; } .u-pt17 { padding-top: 17px !important; } .u-pt18 { padding-top: 18px !important; } .u-pt19 { padding-top: 19px !important; } .u-pt20 { padding-top: 20px !important; } .u-pt25 { padding-top: 25px !important; } .u-pt30 { padding-top: 30px !important; } .u-pt35 { padding-top: 35px !important; } .u-pt40 { padding-top: 40px !important; } .u-pt45 { padding-top: 45px !important; } .u-pt50 { padding-top: 50px !important; } .u-pt55 { padding-top: 55px !important; } .u-pt60 { padding-top: 60px !important; } .u-pt65 { padding-top: 65px !important; } .u-pt70 { padding-top: 70px !important; } .u-pt75 { padding-top: 75px !important; } .u-pt80 { padding-top: 80px !important; } .u-pt85 { padding-top: 85px !important; } .u-pt90 { padding-top: 90px !important; } .u-pt95 { padding-top: 95px !important; } .u-pt100 { padding-top: 100px !important; } .u-pr00 { padding-right: 0px !important; } .u-pr01 { padding-right: 1px !important; } .u-pr02 { padding-right: 2px !important; } .u-pr03 { padding-right: 3px !important; } .u-pr04 { padding-right: 4px !important; } .u-pr05 { padding-right: 5px !important; } .u-pr06 { padding-right: 6px !important; } .u-pr07 { padding-right: 7px !important; } .u-pr08 { padding-right: 8px !important; } .u-pr09 { padding-right: 9px !important; } .u-pr10 { padding-right: 10px !important; } .u-pr11 { padding-right: 11px !important; } .u-pr12 { padding-right: 12px !important; } .u-pr13 { padding-right: 13px !important; } .u-pr14 { padding-right: 14px !important; } .u-pr15 { padding-right: 15px !important; } .u-pr16 { padding-right: 16px !important; } .u-pr17 { padding-right: 17px !important; } .u-pr18 { padding-right: 18px !important; } .u-pr19 { padding-right: 19px !important; } .u-pr20 { padding-right: 20px !important; } .u-pr25 { padding-right: 25px !important; } .u-pr30 { padding-right: 30px !important; } .u-pr35 { padding-right: 35px !important; } .u-pr40 { padding-right: 40px !important; } .u-pr45 { padding-right: 45px !important; } .u-pr50 { padding-right: 50px !important; } .u-pr55 { padding-right: 55px !important; } .u-pr60 { padding-right: 60px !important; } .u-pr65 { padding-right: 65px !important; } .u-pr70 { padding-right: 70px !important; } .u-pr75 { padding-right: 75px !important; } .u-pr80 { padding-right: 80px !important; } .u-pr85 { padding-right: 85px !important; } .u-pr90 { padding-right: 90px !important; } .u-pr95 { padding-right: 95px !important; } .u-pr100 { padding-right: 100px !important; } .u-pb00 { padding-bottom: 0px !important; } .u-pb01 { padding-bottom: 1px !important; } .u-pb02 { padding-bottom: 2px !important; } .u-pb03 { padding-bottom: 3px !important; } .u-pb04 { padding-bottom: 4px !important; } .u-pb05 { padding-bottom: 5px !important; } .u-pb06 { padding-bottom: 6px !important; } .u-pb07 { padding-bottom: 7px !important; } .u-pb08 { padding-bottom: 8px !important; } .u-pb09 { padding-bottom: 9px !important; } .u-pb10 { padding-bottom: 10px !important; } .u-pb11 { padding-bottom: 11px !important; } .u-pb12 { padding-bottom: 12px !important; } .u-pb13 { padding-bottom: 13px !important; } .u-pb14 { padding-bottom: 14px !important; } .u-pb15 { padding-bottom: 15px !important; } .u-pb16 { padding-bottom: 16px !important; } .u-pb17 { padding-bottom: 17px !important; } .u-pb18 { padding-bottom: 18px !important; } .u-pb19 { padding-bottom: 19px !important; } .u-pb20 { padding-bottom: 20px !important; } .u-pb25 { padding-bottom: 25px !important; } .u-pb30 { padding-bottom: 30px !important; } .u-pb35 { padding-bottom: 35px !important; } .u-pb40 { padding-bottom: 40px !important; } .u-pb45 { padding-bottom: 45px !important; } .u-pb50 { padding-bottom: 50px !important; } .u-pb55 { padding-bottom: 55px !important; } .u-pb60 { padding-bottom: 60px !important; } .u-pb65 { padding-bottom: 65px !important; } .u-pb70 { padding-bottom: 70px !important; } .u-pb75 { padding-bottom: 75px !important; } .u-pb80 { padding-bottom: 80px !important; } .u-pb85 { padding-bottom: 85px !important; } .u-pb90 { padding-bottom: 90px !important; } .u-pb95 { padding-bottom: 95px !important; } .u-pb100 { padding-bottom: 100px !important; } .u-pl00 { padding-left: 0px !important; } .u-pl01 { padding-left: 1px !important; } .u-pl02 { padding-left: 2px !important; } .u-pl03 { padding-left: 3px !important; } .u-pl04 { padding-left: 4px !important; } .u-pl05 { padding-left: 5px !important; } .u-pl06 { padding-left: 6px !important; } .u-pl07 { padding-left: 7px !important; } .u-pl08 { padding-left: 8px !important; } .u-pl09 { padding-left: 9px !important; } .u-pl10 { padding-left: 10px !important; } .u-pl11 { padding-left: 11px !important; } .u-pl12 { padding-left: 12px !important; } .u-pl13 { padding-left: 13px !important; } .u-pl14 { padding-left: 14px !important; } .u-pl15 { padding-left: 15px !important; } .u-pl16 { padding-left: 16px !important; } .u-pl17 { padding-left: 17px !important; } .u-pl18 { padding-left: 18px !important; } .u-pl19 { padding-left: 19px !important; } .u-pl20 { padding-left: 20px !important; } .u-pl25 { padding-left: 25px !important; } .u-pl30 { padding-left: 30px !important; } .u-pl35 { padding-left: 35px !important; } .u-pl40 { padding-left: 40px !important; } .u-pl45 { padding-left: 45px !important; } .u-pl50 { padding-left: 50px !important; } .u-pl55 { padding-left: 55px !important; } .u-pl60 { padding-left: 60px !important; } .u-pl65 { padding-left: 65px !important; } .u-pl70 { padding-left: 70px !important; } .u-pl75 { padding-left: 75px !important; } .u-pl80 { padding-left: 80px !important; } .u-pl85 { padding-left: 85px !important; } .u-pl90 { padding-left: 90px !important; } .u-pl95 { padding-left: 95px !important; } .u-pl100 { padding-left: 100px !important; } .u-pa00 { padding: 0px !important; } .u-pa01 { padding: 1px !important; } .u-pa02 { padding: 2px !important; } .u-pa03 { padding: 3px !important; } .u-pa04 { padding: 4px !important; } .u-pa05 { padding: 5px !important; } .u-pa06 { padding: 6px !important; } .u-pa07 { padding: 7px !important; } .u-pa08 { padding: 8px !important; } .u-pa09 { padding: 9px !important; } .u-pa10 { padding: 10px !important; } .u-pa11 { padding: 11px !important; } .u-pa12 { padding: 12px !important; } .u-pa13 { padding: 13px !important; } .u-pa14 { padding: 14px !important; } .u-pa15 { padding: 15px !important; } .u-pa16 { padding: 16px !important; } .u-pa17 { padding: 17px !important; } .u-pa18 { padding: 18px !important; } .u-pa19 { padding: 19px !important; } .u-pa20 { padding: 20px !important; } .u-pa25 { padding: 25px !important; } .u-pa30 { padding: 30px !important; } .u-pa35 { padding: 35px !important; } .u-pa40 { padding: 40px !important; } .u-pa45 { padding: 45px !important; } .u-pa50 { padding: 50px !important; } .u-pa55 { padding: 55px !important; } .u-pa60 { padding: 60px !important; } .u-pa65 { padding: 65px !important; } .u-pa70 { padding: 70px !important; } .u-pa75 { padding: 75px !important; } .u-pa80 { padding: 80px !important; } .u-pa85 { padding: 85px !important; } .u-pa90 { padding: 90px !important; } .u-pa95 { padding: 95px !important; } .u-pa100 { padding: 100px !important; } /*# sourceMappingURL=maps/style.css.map */