@charset "UTF-8"; /*** 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* ======================================= base layout ======================================= */ :root { --color-font: #171717; --color-primary: #ec6013; --color-secondary: #f08800; --color-tertiary: #fcf03d; --font-futura: "Jost", sans-serif; --font-DIN2014: "DIN 2014", "Oswald", sans-serif; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { overscroll-behavior: none; } body { background: #fff; color: var(--color-font); font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif; font-weight: 400; line-height: 1; margin-inline: auto; width: 100%; } @media screen and (max-width: 767px) { body { font-size: 3.646vw; } } @media screen and (min-width: 768px) { body { font-size: 1.311vw; } } @media screen and (min-width: 1220px) { body { font-size: 16px; min-width: 1220px; } } a { color: var(--color-font); } img { max-width: 100%; vertical-align: bottom; } img[height] { height: auto; width: 100%; } b, strong { font-weight: 700; } .wrapper { overflow: hidden; position: relative; width: 100%; } @media screen and (max-width: 767px) { .main { padding-top: 14.323vw; } } @media screen and (min-width: 768px) { .main { padding-top: 5.738vw; } } @media screen and (min-width: 1220px) { .main { padding-top: 70px; } } @media screen and (min-width: 768px) { .l-inner { margin: auto; max-width: 1100px; width: 90.164%; } } @media screen and (min-width: 768px) { .only-sp { display: none !important; } } @media screen and (max-width: 767px) { .only-pc { display: none !important; } } .font-din2014 { font-family: var(--font-DIN2014); } .font-futura { font-family: var(--font-futura); } /* ======================================= header ======================================= */ .l-header { left: 0; position: fixed; top: 0; width: 100%; z-index: 110; } .l-header.is_scrolled { background: rgba(255, 204, 41, 0.4); backdrop-filter: blur(10px); } .headbar { align-items: center; display: flex; justify-content: space-between; } @media screen and (max-width: 767px) { .headbar { height: 13.021vw; padding: 0 2.604vw 0 6.51vw; } } @media screen and (min-width: 768px) { .headbar--l-header { height: 7.377vw; } } @media screen and (min-width: 1220px) { .headbar--l-header { height: 90px; } } @media screen and (max-width: 767px) { .logo { position: relative; width: 32.292vw; z-index: 120; } } @media screen and (min-width: 768px) { .logo { width: 12.705vw; } } @media screen and (min-width: 1220px) { .logo { width: 155px; } } @media screen and (max-width: 767px) { .l-nav { background: linear-gradient(180deg, rgb(254, 216, 36) 0%, rgb(254, 181, 0) 58.87%, rgb(254, 160, 0) 100%); height: 100vh; height: 100dvh; opacity: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; padding: 17.578vw 0 10.417vw; position: absolute; right: 0; top: -100%; transition: all 0.5s linear; visibility: hidden; width: 100%; } } @media screen and (min-width: 768px) { .l-nav { display: flex; flex-direction: row-reverse; gap: 0.82vw; width: 48.361vw; } } @media screen and (min-width: 1220px) { .l-nav { gap: 10px; width: 590px; } } @media screen and (max-width: 767px) { .l-nav__bg { background: transparent; cursor: pointer; display: block; height: 100%; inset: 0; position: absolute; width: 100%; } } @media screen and (min-width: 768px) { .l-nav__bg { display: none !important; } } .l-header-btn { align-items: center; display: flex; justify-content: center; position: relative; } @media screen and (min-width: 768px) { .l-header-btn { border-radius: 2.049vw; height: 4.098vw; padding-right: 0.82vw; text-align: center; } } @media screen and (min-width: 1220px) { .l-header-btn { border-radius: 25px; height: 50px; padding-right: 10px; } } .l-header-btn__label { font-weight: 700; letter-spacing: 0.05em; } @media screen and (min-width: 768px) { .l-header-btn__label { font-size: 1.639vw; } } @media screen and (min-width: 1220px) { .l-header-btn__label { font-size: 20px; } } .l-header-btn__arrow { fill: none; position: absolute; stroke: #fff; stroke-miterlimit: 10; stroke-width: 1.5; top: 50%; transform: translateY(-50%); } @media screen and (min-width: 768px) { .l-header-btn__arrow { right: 1.803vw; width: 0.656vw; } } @media screen and (min-width: 1220px) { .l-header-btn__arrow { right: 22px; width: 8px; } } .l-header-btn--contact { background: #fff; } @media screen and (max-width: 767px) { .l-header-btn--contact { border-radius: 6.51vw; height: 13.021vw; margin-inline: auto; margin-top: 5.208vw; width: 86.979vw; z-index: 5; } } @media screen and (min-width: 768px) { .l-header-btn--contact { width: 18.033vw; } } @media screen and (min-width: 1220px) { .l-header-btn--contact { width: 220px; } } @media (any-hover: hover) { .l-header-btn--contact:hover { background: var(--color-primary); } .l-header-btn--contact:hover .l-header-btn__arrow { stroke: #fff; } .l-header-btn--contact:hover .l-header-btn__label { color: #fff; } } .l-header-btn--contact .l-header-btn__label { color: var(--color-primary); } @media screen and (max-width: 767px) { .l-header-btn--contact .l-header-btn__label { font-size: 4.688vw; width: 71.875vw; } } .l-header-btn--contact .l-header-btn__arrow { stroke: var(--color-primary); } @media screen and (max-width: 767px) { .l-header-btn--contact .l-header-btn__arrow { right: 5.208vw; width: 2.083vw; } } .l-header-btn--line, .l-header-btn--entry { background: var(--color-primary); } @media screen and (max-width: 767px) { .l-header-btn--line, .l-header-btn--entry { border-radius: 4.818vw; height: 9.635vw; padding-right: 2.604vw; width: 33.594vw; } } @media (any-hover: hover) { .l-header-btn--line:hover, .l-header-btn--entry:hover { background: #fff; } .l-header-btn--line:hover .l-header-btn__arrow, .l-header-btn--entry:hover .l-header-btn__arrow { stroke: var(--color-primary); } .l-header-btn--line:hover .l-header-btn__label, .l-header-btn--entry:hover .l-header-btn__label { color: var(--color-primary); } } .l-header-btn--line .l-header-btn__label, .l-header-btn--entry .l-header-btn__label { color: #fff; } @media screen and (max-width: 767px) { .l-header-btn--line .l-header-btn__label, .l-header-btn--entry .l-header-btn__label { font-size: 2.865vw; } } .l-header-btn--line .l-header-btn__arrow, .l-header-btn--entry .l-header-btn__arrow { stroke: #fff; } @media screen and (max-width: 767px) { .l-header-btn--line .l-header-btn__arrow, .l-header-btn--entry .l-header-btn__arrow { right: 2.083vw; width: 1.563vw; } } @media screen and (min-width: 768px) { .l-header-btn--line { width: 20.492vw; } } @media screen and (min-width: 1220px) { .l-header-btn--line { width: 250px; } } @media screen and (min-width: 768px) { .l-header-btn--entry { width: 18.852vw; } } @media screen and (min-width: 1220px) { .l-header-btn--entry { width: 230px; } } .sns { position: relative; } @media screen and (max-width: 767px) { .sns { margin-inline: auto; width: 86.979vw; z-index: 5; } } @media screen and (min-width: 768px) { .sns { width: 9.836vw; } } @media screen and (min-width: 1220px) { .sns { width: 120px; } } .sns__title { align-items: center; background: #fff; cursor: pointer; display: flex; font-weight: 700; letter-spacing: 0.05em; justify-content: center; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .sns__title { border-radius: 6.51vw; height: 13.021vw; } } @media screen and (min-width: 768px) { .sns__title { border-radius: 2.049vw; height: 4.098vw; text-align: center; } } @media screen and (min-width: 1220px) { .sns__title { border-radius: 25px; height: 50px; } } .sns__title.is_active .sns__title-arrow { transform: translateY(-50%) rotate(270deg); } .sns__title-label { color: var(--color-primary); } @media screen and (max-width: 767px) { .sns__title-label { font-size: 4.688vw; width: 71.875vw; } } @media screen and (min-width: 768px) { .sns__title-label { font-size: 1.639vw; } } @media screen and (min-width: 1220px) { .sns__title-label { font-size: 20px; } } .sns__title-arrow { fill: none; position: absolute; stroke: var(--color-primary); stroke-miterlimit: 10; stroke-width: 1.5; top: 50%; transform: translateY(-50%) rotate(90deg); transition: transform 0.3s ease-in-out; } @media screen and (max-width: 767px) { .sns__title-arrow { right: 5.208vw; width: 2.083vw; } } @media screen and (min-width: 768px) { .sns__title-arrow { right: 1.639vw; width: 0.656vw; } } @media screen and (min-width: 1220px) { .sns__title-arrow { right: 20px; width: 8px; } } .sns__body { background: rgba(255, 255, 255, 0.7); display: none; width: 100%; } @media screen and (max-width: 767px) { .sns__body { border-radius: 3.906vw; margin-top: -6.771vw; padding: 7.292vw 1.302vw 0.781vw; } } @media screen and (min-width: 768px) { .sns__body { border-radius: 1.23vw; padding: 3.689vw 0.41vw 0; position: absolute; top: 0.82vw; } } @media screen and (min-width: 1220px) { .sns__body { border-radius: 15px; padding: 45px 5px 0; top: 10px; } } @media screen and (max-width: 767px) { .sns__item:not(:last-child) { border-bottom: 2px dotted #8b8b8b; } } @media screen and (min-width: 768px) { .sns__item:not(:last-child) { border-bottom: 1px dotted #8b8b8b; } } .sns__link { display: block; line-height: 1.4; position: relative; } @media screen and (max-width: 767px) { .sns__link { font-size: 4.167vw; letter-spacing: 0.04em; padding: 4.688vw 5.859vw; } } @media screen and (min-width: 768px) { .sns__link { font-size: 1.066vw; padding: 0.492vw 0 0.492vw 1.639vw; } } @media screen and (min-width: 1220px) { .sns__link { font-size: 13px; padding: 6px 0 6px 20px; } } .sns__link::before { background: var(--color-font); clip-path: polygon(0 0, 0% 100%, 100% 50%); content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 767px) { .sns__link::before { height: 1.693vw; left: 1.823vw; width: 1.302vw; } } @media screen and (min-width: 768px) { .sns__link::before { height: 0.533vw; left: 0.82vw; width: 0.41vw; } } @media screen and (min-width: 1220px) { .sns__link::before { height: 6.5px; left: 10px; width: 5px; } } @media (any-hover: hover) { .sns__link:hover { color: var(--color-primary); } } @media screen and (max-width: 767px) { .toggle { cursor: pointer; display: block; height: 10.938vw; position: relative; width: 10.938vw; } } @media screen and (min-width: 768px) { .toggle { display: none; } } @media screen and (max-width: 767px) { .toggle__bar { background: #fff; display: block; height: 0.651vw; left: 1.563vw; position: absolute; transform-origin: 50%; transition: all 0.3s linear; width: 7.552vw; } .toggle__bar--top { top: 2.474vw; } .toggle__bar--middle { top: 5.208vw; } .toggle__bar--bottom { top: 7.682vw; } } @media screen and (max-width: 767px) { .is_nav-open .l-header-btn--line, .is_nav-open .l-header-btn--entry { display: none; } } @media screen and (max-width: 767px) { .is_nav-open .logo { filter: drop-shadow(0 0 10px rgb(254, 160, 0)); transform: translateZ(0); } } .is_nav-open .toggle__bar { box-shadow: 0 0 10px rgb(254, 160, 0); } @media screen and (max-width: 767px) { .is_nav-open .l-nav { opacity: 1; top: 0; visibility: visible; } } /* ======================================= footer ======================================= */ .l-footer { background: var(--color-font); color: #fff; } @media screen and (max-width: 767px) { .l-footer { padding: 5.208vw 0 3.906vw; } } @media screen and (min-width: 768px) { .l-footer { padding: 2.049vw 0 2.869vw; } } @media screen and (min-width: 1220px) { .l-footer { padding: 25px 0 35px; } } .l-footer__contents { align-items: center; display: flex; justify-content: center; } @media screen and (max-width: 767px) { .l-footer__contents { flex-direction: column; gap: 3.255vw; } } @media screen and (min-width: 768px) { .l-footer__contents { gap: 2.049vw; } } @media screen and (min-width: 1220px) { .l-footer__contents { gap: 25px; } } .l-footer-links { display: flex; justify-content: center; } .l-footer-links__item { letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .l-footer-links__item { font-size: 3.385vw; } } @media screen and (min-width: 768px) { .l-footer-links__item { font-size: 1.475vw; } } @media screen and (min-width: 1220px) { .l-footer-links__item { font-size: 18px; } } .l-footer-links__item:not(:last-child)::after { content: "/"; margin: 0 1em; } .l-footer-links__link { color: #fff; } @media (any-hover: hover) { .l-footer-links__link:hover { opacity: 0.8; text-decoration: underline; } } .l-footer-btn { align-items: center; background: #fff; color: var(--color-primary); display: flex; justify-content: center; position: relative; text-align: center; } @media screen and (max-width: 767px) { .l-footer-btn { border-radius: 5.469vw; height: 10.938vw; width: 65.104vw; } } @media screen and (min-width: 768px) { .l-footer-btn { border-radius: 2.049vw; height: 4.098vw; width: 18.033vw; } } @media screen and (min-width: 1220px) { .l-footer-btn { border-radius: 25px; height: 50px; width: 220px; } } @media (any-hover: hover) { .l-footer-btn:hover { background: var(--color-primary); color: #fff; opacity: 0.8; } .l-footer-btn:hover .l-footer-btn__arrow { stroke: #fff; } } .l-footer-btn__label { font-weight: 700; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .l-footer-btn__label { font-size: 4.167vw; } } @media screen and (min-width: 768px) { .l-footer-btn__label { font-size: 1.639vw; } } @media screen and (min-width: 1220px) { .l-footer-btn__label { font-size: 20px; } } .l-footer-btn__arrow { fill: none; position: absolute; stroke: var(--color-primary); stroke-miterlimit: 10; stroke-width: 1.5; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 767px) { .l-footer-btn__arrow { right: 2.604vw; width: 1.823vw; } } @media screen and (min-width: 768px) { .l-footer-btn__arrow { right: 1.639vw; width: 0.656vw; } } @media screen and (min-width: 1220px) { .l-footer-btn__arrow { right: 20px; width: 8px; } } .copyright { letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .copyright { font-size: 2.344vw; margin-top: 5.208vw; } } @media screen and (min-width: 768px) { .copyright { font-size: 1.148vw; margin-top: 1.639vw; } } @media screen and (min-width: 1220px) { .copyright { font-size: 14px; margin-top: 20px; } } /* ======================================= layout ======================================= */ .hgroup { text-align: center; } .title { font-weight: 600; letter-spacing: 0.07em; text-align: center; text-transform: uppercase; } @media screen and (max-width: 767px) { .title { font-size: 10.547vw; } } @media screen and (min-width: 768px) { .title { font-size: 6.639vw; } } @media screen and (min-width: 1220px) { .title { font-size: 81px; } } .title__small { font-size: 75%; } .hgroup__lead { display: inline-block; font-weight: 700; letter-spacing: 0.05em; padding: 0 0.25em; position: relative; } @media screen and (max-width: 767px) { .hgroup__lead { font-size: 5.469vw; } } @media screen and (min-width: 768px) { .hgroup__lead { font-size: 2.623vw; } } @media screen and (min-width: 1220px) { .hgroup__lead { font-size: 32px; } } .hgroup__lead::after { background-image: radial-gradient(circle farthest-side, var(--color-font), var(--color-font) 38%, transparent 45%, transparent); content: ""; display: inline-block; left: 0; position: absolute; width: 100%; } @media screen and (max-width: 767px) { .hgroup__lead::after { background-size: 1.563vw 2px; bottom: -2.604vw; height: 2px; } } @media screen and (min-width: 768px) { .hgroup__lead::after { background-size: 0.984vw 0.328vw; bottom: -1.311vw; height: 0.328vw; } } @media screen and (min-width: 1220px) { .hgroup__lead::after { background-size: 12px 4px; bottom: -16px; height: 4px; } } /* cta */ .cta { background: #fff; margin-inline: auto; } @media screen and (max-width: 767px) { .cta { box-shadow: 1.563vw 3.125vw 3.125vw rgba(255, 141, 0, 0.3); padding: 6.51vw 0 10.417vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .cta { box-shadow: 0.984vw 1.967vw 1.967vw rgba(255, 141, 0, 0.3); padding: 3.279vw 4.098vw 4.098vw; } } @media screen and (min-width: 1220px) { .cta { box-shadow: 12px 24px 24px rgba(255, 141, 0, 0.3); padding: 40px 50px 50px; } } .cta__title { margin-inline: auto; } @media screen and (max-width: 767px) { .cta__title { width: 54.688vw; } } @media screen and (min-width: 768px) { .cta__title { width: 28.689vw; } } @media screen and (min-width: 1220px) { .cta__title { width: 350px; } } .cta-btn { align-items: center; background: #fff; border: 2px solid; color: var(--color-primary); display: flex; justify-content: center; position: relative; text-align: center; } @media screen and (max-width: 767px) { .cta-btn { border-radius: 5.469vw; height: 10.938vw; width: 65.104vw; } } @media screen and (min-width: 768px) { .cta-btn { border-radius: 2.049vw; height: 4.098vw; width: 18.033vw; } } @media screen and (min-width: 1220px) { .cta-btn { border-radius: 25px; height: 50px; width: 220px; } } @media (any-hover: hover) { .cta-btn:hover { background: var(--color-primary); color: #fff; opacity: 0.8; } .cta-btn:hover .l-footer-btn__arrow { stroke: #fff; } } .cta-btn__label { font-weight: 700; } .cta-btn__arrow { fill: none; position: absolute; stroke: #fff; stroke-miterlimit: 10; stroke-width: 1.5; top: 50%; transform: translateY(-50%); } .cta-btn--large { background: #ff8d00; border-color: #ff8d00; color: #fff; margin-inline: auto; } @media screen and (max-width: 767px) { .cta-btn--large { border-radius: 7.161vw; height: 14.323vw; margin-top: 4.688vw; width: 72.917vw; } } @media screen and (min-width: 768px) { .cta-btn--large { border-radius: 2.787vw; height: 5.738vw; margin-top: 2.213vw; width: 36.475vw; } } @media screen and (min-width: 1220px) { .cta-btn--large { border-radius: 34px; height: 70px; margin-top: 27px; width: 445px; } } @media (any-hover: hover) { .cta-btn--large:hover { background: #fff; color: #ff8d00; opacity: 0.8; } .cta-btn--large:hover .cta-btn__arrow { stroke: #ff8d00; } } .cta-btn--large .cta-btn__label { letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .cta-btn--large .cta-btn__label { font-size: 4.948vw; } } @media screen and (min-width: 768px) { .cta-btn--large .cta-btn__label { font-size: 2.459vw; } } @media screen and (min-width: 1220px) { .cta-btn--large .cta-btn__label { font-size: 30px; } } @media screen and (max-width: 767px) { .cta-btn--large .cta-btn__arrow { right: 3.255vw; width: 1.823vw; } } @media screen and (min-width: 768px) { .cta-btn--large .cta-btn__arrow { right: 2.705vw; width: 0.902vw; } } @media screen and (min-width: 1220px) { .cta-btn--large .cta-btn__arrow { right: 33px; width: 11px; } } .cta-btn--small { background: #ffbc22; border-color: #ffbc22; color: #fff; margin-inline: auto; } @media screen and (max-width: 767px) { .cta-btn--small { border-radius: 3.776vw; height: 13.021vw; width: 37.76vw; } } @media screen and (min-width: 768px) { .cta-btn--small { border-radius: 2.377vw; height: 4.918vw; width: 24.59vw; } } @media screen and (min-width: 1220px) { .cta-btn--small { border-radius: 29px; height: 60px; width: 300px; } } @media (any-hover: hover) { .cta-btn--small:hover { background: #fff; color: #ffbc22; opacity: 0.8; } .cta-btn--small:hover .cta-btn__arrow { stroke: #ffbc22; } } @media screen and (max-width: 767px) { .cta-btn--small .cta-btn__label { font-size: 3.385vw; line-height: 1.308; } } @media screen and (min-width: 768px) { .cta-btn--small .cta-btn__label { font-size: 1.475vw; } } @media screen and (min-width: 1220px) { .cta-btn--small .cta-btn__label { font-size: 18px; } } @media screen and (max-width: 767px) { .cta-btn--small .cta-btn__arrow { right: 2.344vw; width: 1.172vw; } } @media screen and (min-width: 768px) { .cta-btn--small .cta-btn__arrow { right: 1.639vw; width: 0.738vw; } } @media screen and (min-width: 1220px) { .cta-btn--small .cta-btn__arrow { right: 20px; width: 9px; } } .cta__list { background: #fff; display: flex; flex-wrap: wrap; justify-content: center; } @media screen and (max-width: 767px) { .cta__list { gap: 3.906vw; margin-top: 9.115vw; } } @media screen and (min-width: 768px) { .cta__list { gap: 2.459vw; margin-top: 2.459vw; } } @media screen and (min-width: 1220px) { .cta__list { gap: 30px; margin-top: 30px; } } .cta__item { align-items: center; display: flex; flex-direction: column; } @media screen and (max-width: 767px) { .cta__item { gap: 1.302vw; } } @media screen and (min-width: 768px) { .cta__item { gap: 1.311vw; } } @media screen and (min-width: 1220px) { .cta__item { gap: 16px; } } .cta__lead { font-weight: 500; letter-spacing: 0.05em; text-align: center; position: relative; } @media screen and (max-width: 767px) { .cta__lead { font-size: 3.125vw; line-height: 1.292; } } @media screen and (min-width: 768px) { .cta__lead { font-size: 1.475vw; line-height: 1.444; } } @media screen and (min-width: 1220px) { .cta__lead { font-size: 18px; } } .cta__lead::before, .cta__lead::after { border: dotted #ffe23b; bottom: 0; content: ""; height: 90%; position: absolute; width: 1px; } @media screen and (max-width: 767px) { .cta__lead::before, .cta__lead::after { border-width: 0 0 0 2px; } } @media screen and (min-width: 768px) { .cta__lead::before, .cta__lead::after { border-width: 0 0 0 3px; } } .cta__lead::before { transform: rotate(-15deg); } @media screen and (max-width: 767px) { .cta__lead::before { left: -4.167vw; } } @media screen and (min-width: 768px) { .cta__lead::before { left: -1.803vw; } } @media screen and (min-width: 1220px) { .cta__lead::before { left: -22px; } } .cta__lead::after { transform: rotate(15deg); } @media screen and (max-width: 767px) { .cta__lead::after { right: -4.167vw; } } @media screen and (min-width: 768px) { .cta__lead::after { right: -1.803vw; } } @media screen and (min-width: 1220px) { .cta__lead::after { right: -22px; } } .cta-wrap { background: #ffcc29; } .cta-wrap__contents { position: relative; } @media screen and (max-width: 767px) { .cta-wrap__contents { padding: 11.198vw 0 12.24vw; } } @media screen and (min-width: 768px) { .cta-wrap__contents { padding: 6.557vw 0; } } @media screen and (min-width: 1220px) { .cta-wrap__contents { padding: 80px 0; } } .cta-wrap__deco { position: absolute; top: 0; } @media screen and (max-width: 767px) { .cta-wrap__deco { right: 1.563vw; width: 21.875vw; } } @media screen and (min-width: 768px) { .cta-wrap__deco { right: 3.115vw; width: 13.77vw; } } @media screen and (min-width: 1220px) { .cta-wrap__deco { right: 38px; width: 168px; } } /* kv */ @media screen and (min-width: 768px) { .kv { background: url(../images/kv_bg_pc.jpg) 50% 0/auto 100% no-repeat #f9b013; } } .kv__contents { position: relative; } @media screen and (max-width: 767px) { .kv__contents { background: url(../images/kv_bg_sp.jpg) 0 100%/100% auto no-repeat #f9b013; min-height: 131.51vw; padding: 22.786vw 0 3.906vw; } } @media screen and (min-width: 768px) { .kv__contents { display: flex; height: 61.475vw; justify-content: space-between; } } @media screen and (min-width: 1220px) { .kv__contents { height: 750px; } } @media screen and (max-width: 767px) { .kv__main { padding-left: 6.25vw; } } @media screen and (min-width: 768px) { .kv__main { padding: 9.836vw 0 0 0.82vw; width: 46.721vw; } } @media screen and (min-width: 1220px) { .kv__main { padding: 120px 0 0 10px; width: 570px; } } .kv__lead { background: var(--color-font); color: #fff; display: inline-block; font-weight: 700; letter-spacing: 0.02em; padding: 0 0.4em; } @media screen and (max-width: 767px) { .kv__lead { font-size: 6.25vw; line-height: 1.458; } } @media screen and (min-width: 768px) { .kv__lead { font-size: 3.279vw; line-height: 1.5; } } @media screen and (min-width: 1220px) { .kv__lead { font-size: 40px; } } .kv__catch { align-items: center; display: flex; font-weight: 700; } @media screen and (max-width: 767px) { .kv__catch { font-size: 8.854vw; gap: 0.781vw; } } @media screen and (min-width: 768px) { .kv__catch { font-size: 4.508vw; gap: 0.328vw; } } @media screen and (min-width: 1220px) { .kv__catch { font-size: 55px; gap: 4px; } } @media screen and (max-width: 767px) { .kv__catch--01 { margin-top: 2.083vw; } } @media screen and (min-width: 768px) { .kv__catch--01 { margin-top: 1.148vw; } } @media screen and (min-width: 1220px) { .kv__catch--01 { margin-top: 14px; } } @media screen and (max-width: 767px) { .kv__catch--02 { margin-top: 0.781vw; } } @media screen and (min-width: 768px) { .kv__catch--02 { margin-top: 0.328vw; } } @media screen and (min-width: 1220px) { .kv__catch--02 { margin-top: 4px; } } .kv__catch-box { align-items: center; background: #fff; display: flex; justify-content: center; } @media screen and (max-width: 767px) { .kv__catch-box { font-size: 12.76vw; height: 16.146vw; width: 16.146vw; } } @media screen and (min-width: 768px) { .kv__catch-box { font-size: 6.557vw; height: 8.197vw; width: 8.197vw; } } @media screen and (min-width: 1220px) { .kv__catch-box { font-size: 80px; height: 100px; width: 100px; } } .kv__catch-box:nth-of-type(1) { color: var(--color-primary); } .records { color: #fff; font-weight: 700; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .records { margin-top: 2.604vw; } } @media screen and (min-width: 768px) { .records { margin-top: 1.23vw; } } @media screen and (min-width: 1220px) { .records { margin-top: 15px; } } .records::before, .records::after { background: url(../images/records_deco.svg) 50% 50%/contain no-repeat; content: ""; display: inline-block; vertical-align: text-bottom; } @media screen and (max-width: 767px) { .records::before, .records::after { height: 6.901vw; width: 2.604vw; } } @media screen and (min-width: 768px) { .records::before, .records::after { height: 3.443vw; width: 1.23vw; } } @media screen and (min-width: 1220px) { .records::before, .records::after { height: 42px; width: 20px; } } .records::after { transform: scaleX(-1); } .records__title { display: inline-block; } @media screen and (max-width: 767px) { .records__title { font-size: 4.427vw; } } @media screen and (min-width: 768px) { .records__title { font-size: 2.213vw; } } @media screen and (min-width: 1220px) { .records__title { font-size: 27px; } } .records__data { display: inline-block; } @media screen and (max-width: 767px) { .records__data { font-size: 7.031vw; } } @media screen and (min-width: 768px) { .records__data { font-size: 3.689vw; } } @media screen and (min-width: 1220px) { .records__data { font-size: 45px; } } .records__sup { vertical-align: super; } @media screen and (max-width: 767px) { .records__sup { font-size: 2.474vw; } } @media screen and (min-width: 768px) { .records__sup { font-size: 1.311vw; } } @media screen and (min-width: 1220px) { .records__sup { font-size: 16px; } } .kv__text { font-weight: 700; letter-spacing: 0.04em; position: relative; text-decoration: underline; text-decoration-color: var(--color-font); text-decoration-skip-ink: none; text-decoration-thickness: 0.1em; text-underline-offset: 0.4em; } @media screen and (max-width: 767px) { .kv__text { font-size: 4.557vw; line-height: 1.914; margin-top: 2.604vw; } } @media screen and (min-width: 768px) { .kv__text { font-size: 2.049vw; line-height: 1.84; } } @media screen and (min-width: 1220px) { .kv__text { font-size: 25px; margin-top: 30px; } } .kv__text-em { color: #fff; line-height: 1; } @media screen and (max-width: 767px) { .kv__text-em { font-size: 5.729vw; } } @media screen and (min-width: 768px) { .kv__text-em { font-size: 2.623vw; } } @media screen and (min-width: 1220px) { .kv__text-em { font-size: 32px; } } .kv__deco { position: absolute; } @media screen and (max-width: 767px) { .kv__deco { bottom: -0.911vw; left: 29.948vw; width: 4.036vw; } } @media screen and (min-width: 768px) { .kv__deco { bottom: -0.82vw; left: 28.033vw; width: 1.639vw; } } @media screen and (min-width: 1220px) { .kv__deco { bottom: -10px; left: 342px; width: 20px; } } .kv__notes { color: #fff; letter-spacing: 0.04em; line-height: 1; } @media screen and (max-width: 767px) { .kv__notes { font-size: 2.604vw; margin-inline-start: 6.51vw; margin-top: 9.766vw; } } @media screen and (min-width: 768px) { .kv__notes { bottom: 1.23vw; font-size: 0.984vw; position: absolute; right: 1.639vw; text-align: right; } } @media screen and (min-width: 1220px) { .kv__notes { bottom: 15px; font-size: 12px; right: 20px; } } @media screen and (max-width: 767px) { .form { background: #ffcc29; height: 100vh; height: 100dvh; left: 0; opacity: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; padding: 17.578vw 0 10.417vw; position: fixed; top: -100%; transition: all 0.5s linear; visibility: hidden; width: 100%; z-index: 120; } } @media screen and (max-width: 767px) { .is_form-open .l-header-btn--entry { display: none; } } @media screen and (max-width: 767px) { .is_form-open .form { opacity: 1; top: 0; visibility: visible; } } @media screen and (max-width: 767px) { .form__bg { background: transparent; cursor: pointer; display: block; height: 100%; inset: 0; position: absolute; width: 100%; z-index: 5; } } @media screen and (max-width: 767px) { .headbar--form { left: 0; position: absolute; top: 0; width: 100%; } } .form__box { background: rgba(255, 255, 255, 0.8); } @media screen and (max-width: 767px) { .form__box { border-radius: 3.906vw; margin-inline: auto; padding: 5.859vw 7.161vw 9.115vw; position: relative; width: 86.979vw; z-index: 5; } } @media screen and (min-width: 768px) { .form__box { border-radius: 2.459vw; margin-top: 14.754vw; padding: 2.869vw 2.459vw 4.918vw; width: 29.508vw; } } @media screen and (min-width: 1220px) { .form__box { border-radius: 30px; margin-top: 180px; padding: 35px 30px 60px; width: 360px; } } .form__lead { color: var(--color-primary); font-weight: 700; letter-spacing: 0.04em; text-align: center; } @media screen and (max-width: 767px) { .form__lead { font-size: 5.99vw; line-height: 1.348; } } @media screen and (min-width: 768px) { .form__lead { font-size: 1.803vw; line-height: 1.318; } } @media screen and (min-width: 1220px) { .form__lead { font-size: 22px; } } .form__table { width: 100%; } @media screen and (max-width: 767px) { .form__table { margin-top: 5.208vw; } } @media screen and (min-width: 768px) { .form__table { margin-top: 1.23vw; } } @media screen and (min-width: 1220px) { .form__table { margin-top: 15px; } } .form__table-head, .form__table-data { vertical-align: middle; } @media screen and (max-width: 767px) { .form__table-head, .form__table-data { padding: 1.302vw 0; } } @media screen and (min-width: 768px) { .form__table-head, .form__table-data { padding: 0.574vw 0; } } @media screen and (min-width: 1220px) { .form__table-head, .form__table-data { padding: 7px 0; } } .form__table-head { color: #2e2e2e; } @media screen and (max-width: 767px) { .form__table-head { font-size: 3.125vw; width: 13.672vw; } } @media screen and (min-width: 768px) { .form__table-head { font-size: 1.066vw; width: 5.246vw; } } @media screen and (min-width: 1220px) { .form__table-head { font-size: 13px; width: 64px; } } .form__input { background: #fff; border: 0; line-height: 1.2; } @media screen and (max-width: 767px) { .form__input { padding: 3.516vw 3.906vw; } } @media screen and (min-width: 768px) { .form__input { font-size: 1.066vw; padding: 0.574vw 0.82vw; } } @media screen and (min-width: 1220px) { .form__input { font-size: 13px; padding: 7px 10px; } } .form__input::placeholder { color: #999; } .form__input--text { width: 100%; } .form__names { display: flex; justify-content: space-between; } @media screen and (max-width: 767px) { .form__input--first-name { width: 28.516vw; } } @media screen and (min-width: 768px) { .form__input--first-name { width: 9.18vw; } } @media screen and (min-width: 1220px) { .form__input--first-name { width: 112px; } } @media screen and (max-width: 767px) { .form__input--last-name { width: 27.083vw; } } @media screen and (min-width: 768px) { .form__input--last-name { width: 9.18vw; } } @media screen and (min-width: 1220px) { .form__input--last-name { width: 112px; } } .form__input--select { background-image: url(../images/select_arrow.svg); background-repeat: no-repeat; width: 100%; } @media screen and (max-width: 767px) { .form__input--select { background-position: 95.55% 50%; background-size: 2.734vw auto; } } @media screen and (min-width: 768px) { .form__input--select { background-position: 95.338% 50%; background-size: 0.902vw auto; } } @media screen and (min-width: 1220px) { .form__input--select { background-size: 11px auto; } } .form__submit { align-items: center; background-color: #f6901d; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207.73%2013.07%22%3E%3Cpath%20d%3D%22m.52.54%206.14%206-6.14%206%22%20stroke%3D%22%23fff%22%20fill%3D%22none%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; border: 2px solid #f6901d; color: #fff; cursor: pointer; display: flex; font-weight: 700; justify-content: center; letter-spacing: 0.05em; margin-inline: auto; text-align: center; } @media screen and (max-width: 767px) { .form__submit { background-position: 95.357% 50%; background-size: 1.823vw auto; border-radius: 7.161vw; font-size: 4.167vw; height: 14.323vw; margin-top: 3.906vw; width: 72.917vw; } } @media screen and (min-width: 768px) { .form__submit { background-position: 95.395% 50%; background-size: 0.615vw auto; border-radius: 2.459vw; font-size: 1.475vw; height: 4.59vw; margin-top: 2.459vw; width: 24.918vw; } } @media screen and (min-width: 1220px) { .form__submit { background-size: 7.5px auto; border-radius: 30px; font-size: 18px; height: 56px; margin-top: 30px; width: 304px; } } @media (any-hover: hover) { .form__submit:hover { background-color: #fff; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207.73%2013.07%22%3E%3Cpath%20d%3D%22m.52.54%206.14%206-6.14%206%22%20stroke%3D%22%23f6901d%22%20fill%3D%22none%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); color: #f6901d; } } @media screen and (max-width: 767px) { .toggle-form { align-items: center; background-color: #f6901d; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207.73%2013.07%22%3E%3Cpath%20d%3D%22m.52.54%206.14%206-6.14%206%22%20stroke%3D%22%23fff%22%20fill%3D%22none%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); background-position: 95.357% 50%; background-repeat: no-repeat; background-size: 1.823vw auto; border: 2px solid #f6901d; border-radius: 7.161vw; color: #fff; cursor: pointer; display: flex; font-size: 4.167vw; font-weight: 700; height: 14.323vw; justify-content: center; letter-spacing: 0.05em; margin-inline: auto; margin-top: 5.208vw; text-align: center; width: 72.917vw; } } @media (any-hover: hover) { .toggle-form:hover { background-color: #fff; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207.73%2013.07%22%3E%3Cpath%20d%3D%22m.52.54%206.14%206-6.14%206%22%20stroke%3D%22%23f6901d%22%20fill%3D%22none%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); color: #f6901d; } } /* certification */ @media screen and (max-width: 767px) { .certification { padding: 5.208vw 0 3.906vw; } } @media screen and (min-width: 768px) { .certification { padding: 2.951vw 0 0.82vw; } } @media screen and (min-width: 1220px) { .certification { padding: 36px 0 10px; } } .certification__list { display: flex; flex-wrap: wrap; justify-content: center; } @media screen and (max-width: 767px) { .certification__list { gap: 3.906vw 2.865vw; } } @media screen and (min-width: 768px) { .certification__list { gap: 1.636%; } } @media screen and (min-width: 1220px) { .certification__list { gap: 18px; } } .certification__item { position: relative; } @media screen and (max-width: 767px) { .certification__item { min-height: 17.839vw; padding-bottom: 3.255vw; width: 39.583vw; } } @media screen and (min-width: 768px) { .certification__item { min-height: 9.59vw; padding-bottom: 2.049vw; width: 23.636%; } } @media screen and (min-width: 1220px) { .certification__item { min-height: 117px; padding-bottom: 25px; width: 260px; } } .certification__item::before, .certification__item::after { background: url(../images/certification_deco.svg) 50% 100%/contain no-repeat; bottom: 0; content: ""; display: block; position: absolute; z-index: -1; } @media screen and (max-width: 767px) { .certification__item::before, .certification__item::after { height: 17.839vw; width: 7.682vw; } } @media screen and (min-width: 768px) { .certification__item::before, .certification__item::after { height: 9.59vw; width: 4.18vw; } } @media screen and (min-width: 1220px) { .certification__item::before, .certification__item::after { height: 117px; width: 51px; } } .certification__item::before { left: 0; } .certification__item::after { right: 0; transform: scaleX(-1); } .certification__logo { margin-inline: auto; overflow: hidden; } @media screen and (max-width: 767px) { .certification__logo { border-radius: 0.76vw; box-shadow: 0 0 0.76vw rgba(0, 0, 0, 0.1); width: 9.57vw; } } @media screen and (min-width: 768px) { .certification__logo { border-radius: 0.41vw; box-shadow: 0 0 0.41vw rgba(0, 0, 0, 0.1); width: 5.164vw; } } @media screen and (min-width: 1220px) { .certification__logo { border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); width: 63px; } } .certification__lead { color: #333; letter-spacing: 0.02em; line-height: 1.5; text-align: center; } @media screen and (max-width: 767px) { .certification__lead { font-size: 1.975vw; margin-top: 0.651vw; } } @media screen and (min-width: 768px) { .certification__lead { font-size: 1.066vw; margin-top: 0.41vw; } } @media screen and (min-width: 1220px) { .certification__lead { font-size: 13px; margin-top: 5px; } } .certification__lead-80p { font-size: 80%; } @media screen and (max-width: 767px) { .certification__data { margin-top: 0.651vw; } } @media screen and (min-width: 768px) { .certification__data { margin-top: 0.41vw; } } @media screen and (min-width: 1220px) { .certification__data { margin-top: 5px; } } .certification__name { font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; text-align: center; } @media screen and (max-width: 767px) { .certification__name { font-size: 2.734vw; } } @media screen and (min-width: 768px) { .certification__name { font-size: 1.475vw; } } @media screen and (min-width: 1220px) { .certification__name { font-size: 18px; } } .awards { display: flex; justify-content: center; } @media screen and (max-width: 767px) { .awards { gap: 0.651vw; } } @media screen and (min-width: 768px) { .awards { gap: 0.41vw; } } @media screen and (min-width: 1220px) { .awards { gap: 5px; } } .awards__lead { font-weight: 700; line-height: 1.2; } @media screen and (max-width: 767px) { .awards__lead { font-size: 1.519vw; } } @media screen and (min-width: 768px) { .awards__lead { font-size: 0.82vw; } } @media screen and (min-width: 1220px) { .awards__lead { font-size: 10px; } } .awards__title { font-weight: 700; letter-spacing: 0.05em; line-height: 1.2; } @media screen and (max-width: 767px) { .awards__title { font-size: 2.279vw; } } @media screen and (min-width: 768px) { .awards__title { font-size: 1.23vw; } } @media screen and (min-width: 1220px) { .awards__title { font-size: 15px; } } /* clients */ @media screen and (max-width: 767px) { .clients { padding: 3.906vw 0 5.208vw; } } @media screen and (min-width: 768px) { .clients { padding: 2.049vw 0 3.279vw; } } @media screen and (min-width: 1220px) { .clients { padding: 25px 0 40px; } } .clients__title { align-items: center; display: flex; font-weight: 700; letter-spacing: 0.04em; justify-content: space-between; text-align: center; white-space: nowrap; } @media screen and (max-width: 767px) { .clients__title { font-size: 4.167vw; gap: 3.906vw; } } @media screen and (min-width: 768px) { .clients__title { font-size: 1.721vw; gap: 1.475vw; } } @media screen and (min-width: 1220px) { .clients__title { font-size: 21px; gap: 18px; } } .clients__title::before, .clients__title::after { background: var(--color-font); content: ""; display: block; height: 1px; width: 50%; } @keyframes clients-slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .clients__list { display: flex; flex-wrap: nowrap; } @media screen and (max-width: 767px) { .clients__list { animation: clients-slide 25s linear infinite; gap: 7.813vw; margin-top: 3.906vw; } } @media screen and (min-width: 768px) { .clients__list { animation: clients-slide 50s linear infinite; gap: 5.41vw; margin-top: 1.639vw; } } @media screen and (min-width: 1220px) { .clients__list { gap: 66px; margin-top: 20px; } } .clients__item { display: flex; margin: 0; width: max-content; } @media screen and (max-width: 767px) { .clients__item { height: 11.068vw; } } @media screen and (min-width: 768px) { .clients__item { height: 6.967vw; } } @media screen and (min-width: 1220px) { .clients__item { height: 85px; } } .clients__image { height: 100% !important; max-inline-size: inherit; } /* concept */ .concept { background: #ff8d15; } @media screen and (max-width: 767px) { .concept { background: url(../images/concept_bg_sp.jpg) 0/100% 100% no-repeat; height: 447.917vw; padding-top: 11.719vw; } } @media screen and (min-width: 768px) { .concept { background: url(../images/concept_bg_pc.jpg) 50% 0/auto 100% no-repeat #ff8d15; height: 182.787vw; padding-top: 7.377vw; } } @media screen and (min-width: 1220px) { .concept { height: 2230px; padding-top: 90px; } } .concept__title { color: #fff; font-weight: 600; letter-spacing: 0.1em; text-align: center; text-decoration: underline; text-decoration-color: #fff; text-decoration-skip-ink: none; text-decoration-thickness: 0.08em; text-underline-offset: 0.3em; } @media screen and (max-width: 767px) { .concept__title { font-size: 7.031vw; } } @media screen and (min-width: 768px) { .concept__title { font-size: 4.426vw; } } @media screen and (min-width: 1220px) { .concept__title { font-size: 54px; } } .concept__main { margin-inline: auto; text-align: center; } @media screen and (max-width: 767px) { .concept__main { height: 62.5vw; margin-top: 6.51vw; width: 95.052vw; } } @media screen and (min-width: 768px) { .concept__main { height: 33.607vw; margin-top: 4.918vw; width: 81.967vw; } } @media screen and (min-width: 1220px) { .concept__main { height: 410px; margin-top: 60px; width: 1000px; } } .concept__catch-en { display: inline-block; font-weight: 600; letter-spacing: -0.01em; position: relative; } @media screen and (max-width: 767px) { .concept__catch-en { font-size: 11.719vw; } } @media screen and (min-width: 768px) { .concept__catch-en { font-size: 7.377vw; } } @media screen and (min-width: 1220px) { .concept__catch-en { font-size: 90px; } } .concept__catch-en::before, .concept__catch-en::after { background: url(../images/concept_quotation.svg) 0/cover no-repeat; content: ""; height: 0.34em; position: absolute; width: 0.43em; } .concept__catch-en::before { left: -0.5em; top: 0; } .concept__catch-en::after { bottom: 0; right: -0.6em; transform: scaleX(-1); } .concept__catch-ja { font-weight: 700; letter-spacing: 0.07em; } @media screen and (max-width: 767px) { .concept__catch-ja { font-size: 5.859vw; margin-top: 0.651vw; } } @media screen and (min-width: 768px) { .concept__catch-ja { font-size: 3.689vw; margin-top: 0.41vw; } } @media screen and (min-width: 1220px) { .concept__catch-ja { font-size: 45px; margin-top: 5px; } } .concept__lead { color: #fff; font-weight: 700; letter-spacing: 0.05em; line-height: 1.6; } @media screen and (max-width: 767px) { .concept__lead { font-size: 4.688vw; margin-top: 6.51vw; } } @media screen and (min-width: 768px) { .concept__lead { font-size: 2.705vw; margin-top: 3.689vw; } } @media screen and (min-width: 1220px) { .concept__lead { font-size: 33px; margin-top: 45px; } } .concept__text { color: #fff; font-weight: 700; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .concept__text { font-size: 3.516vw; line-height: 1.704; margin-top: 1.953vw; } } @media screen and (min-width: 768px) { .concept__text { font-size: 1.557vw; line-height: 1.895; margin-top: 1.23vw; } } @media screen and (min-width: 1220px) { .concept__text { font-size: 19px; margin-top: 15px; } } .trouble { margin-inline: auto; transform: translateZ(0); } @media screen and (max-width: 767px) { .trouble { filter: drop-shadow(2.344vw 3.385vw 2.604vw rgba(0, 0, 0, 0.2)); margin-top: 3.906vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .trouble { filter: drop-shadow(1.475vw 2.131vw 1.639vw rgba(0, 0, 0, 0.2)); margin-top: 3.279vw; } } @media screen and (min-width: 1220px) { .trouble { filter: drop-shadow(18px 26px 20px rgba(0, 0, 0, 0.2)); margin-top: 40px; } } @media screen and (max-width: 767px) { .trouble__inner { background: url(../images/trouble_bg_sp.jpg) 0/cover no-repeat; clip-path: polygon(0 0, 91.3% 0, 100% 5.1%, 100% 100%, 8.7% 100%, 0% 94.9%); height: 135.417vw; padding-top: 6.51vw; } } @media screen and (min-width: 768px) { .trouble__inner { background: url(../images/trouble_bg_pc.jpg) 0/cover no-repeat; clip-path: polygon(0 0, 94.7% 0, 100% 9.7%, 100% 100%, 5.3% 100%, 0% 90.3%); height: 45.082vw; padding-top: 2.869vw; } } @media screen and (min-width: 1220px) { .trouble__inner { height: 550px; padding-top: 35px; } } .trouble__lead { font-weight: 700; letter-spacing: 0.05em; line-height: 1.6; text-align: center; } @media screen and (max-width: 767px) { .trouble__lead { font-size: 4.427vw; } } @media screen and (min-width: 768px) { .trouble__lead { font-size: 2.295vw; } } @media screen and (min-width: 1220px) { .trouble__lead { font-size: 28px; } } .trouble__catch { font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .trouble__catch { font-size: 7.031vw; } } @media screen and (min-width: 768px) { .trouble__catch { font-size: 3.115vw; line-height: 1.6; } } @media screen and (min-width: 1220px) { .trouble__catch { font-size: 38px; } } .trouble__catch-em { background: url(../images/trouble_balloon.svg) 0/cover no-repeat; color: #f6901d; display: inline-block; line-height: 1; } @media screen and (max-width: 767px) { .trouble__catch-em { font-size: 8.073vw; height: 20.573vw; margin: 0 0.125em; padding: 5.859vw 0 0 1.302vw; width: 34.505vw; } } @media screen and (min-width: 768px) { .trouble__catch-em { font-size: 3.607vw; height: 9.18vw; margin: 0 0.2em; padding: 2.459vw 0 0 0.82vw; width: 15.328vw; } } @media screen and (min-width: 1220px) { .trouble__catch-em { font-size: 44px; height: 112px; padding: 30px 0 0 10px; width: 187px; } } @media screen and (max-width: 767px) { .trouble__list { margin-inline-start: 6.51vw; margin-top: 1.953vw; } } @media screen and (min-width: 768px) { .trouble__list { margin-inline-start: 8.607vw; margin-top: 0.82vw; width: 77.459vw; } } @media screen and (min-width: 1220px) { .trouble__list { margin-inline-start: 105px; margin-top: 10px; width: 945px; } } .trouble__item { background: url(../images/trouble_check.svg) no-repeat #333; color: #fff; display: inline-block; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .trouble__item { background-position: 2.865vw 3.255vw; background-size: 4.297vw auto; line-height: 1.429; margin-top: 2.604vw; padding: 2.604vw 3.255vw 2.604vw 9.115vw; } } @media screen and (min-width: 768px) { .trouble__item { background-position: 1.803vw 1.23vw; background-size: 2.295vw auto; font-size: 1.639vw; line-height: 1.6; margin-top: 1.23vw; padding: 0.574vw 2.459vw 0.574vw 4.918vw; } } @media screen and (min-width: 1220px) { .trouble__item { background-position: 22px 15px; background-size: 28px auto; font-size: 20px; margin-top: 15px; padding: 7px 30px 7px 60px; } } .trouble__item-em { color: var(--color-tertiary); } @media screen and (max-width: 767px) { .trouble__item-em { font-size: 4.427vw; } } @media screen and (min-width: 768px) { .trouble__item-em { font-size: 1.967vw; } } @media screen and (min-width: 1220px) { .trouble__item-em { font-size: 24px; } } @media screen and (max-width: 767px) { .trouble__item--02 { margin-inline-start: 10.156vw; } } @media screen and (min-width: 768px) { .trouble__item--02 { margin-inline-start: 2.459vw; } } @media screen and (min-width: 1220px) { .trouble__item--02 { margin-inline-start: 30px; } } @media screen and (min-width: 768px) { .trouble__item--03 { margin-inline-start: 4.918vw; } } @media screen and (min-width: 1220px) { .trouble__item--03 { margin-inline-start: 60px; } } @media screen and (max-width: 767px) { .trouble__item--04 { margin-inline-start: 3.906vw; } } @media screen and (min-width: 768px) { .trouble__item--04 { margin-inline-start: 7.377vw; } } @media screen and (min-width: 1220px) { .trouble__item--04 { margin-inline-start: 90px; } } .solvable { position: relative; } @media screen and (max-width: 767px) { .solvable { min-height: 54.688vw; padding: 13.021vw 0 3.906vw; } } @media screen and (min-width: 768px) { .solvable { min-height: 29.918vw; padding: 9.426vw 0 4.098vw; } } @media screen and (min-width: 1220px) { .solvable { min-height: 365px; padding: 115px 0 50px; } } .solvable::after { background: url(../images/solvable_bg.png) 0/cover no-repeat; bottom: 0; content: ""; position: absolute; } @media screen and (max-width: 767px) { .solvable::after { height: 22.135vw; left: 47.135vw; width: 102.865vw; } } @media screen and (min-width: 768px) { .solvable::after { height: 22.951vw; left: 40.164vw; width: 106.557vw; } } @media screen and (min-width: 1220px) { .solvable::after { height: 280px; left: 490px; width: 1300px; } } .solvable__dot { left: 50%; position: absolute; top: 0; transform: translate(-50%, -50%); } @media screen and (max-width: 767px) { .solvable__dot { width: 0.911vw; } } @media screen and (min-width: 768px) { .solvable__dot { width: 0.574vw; } } @media screen and (min-width: 1220px) { .solvable__dot { width: 7px; } } .solvable__image { bottom: 0; position: absolute; z-index: 5; } @media screen and (max-width: 767px) { .solvable__image { right: 1.302vw; width: 37.76vw; } } @media screen and (min-width: 768px) { .solvable__image { right: 9.426vw; width: 30vw; } } @media screen and (min-width: 1220px) { .solvable__image { right: 115px; width: 366px; } } .solvable__main { color: #fff; font-weight: 700; letter-spacing: 0.05em; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .solvable__main { text-align: center; width: 74.219vw; } } @media screen and (min-width: 768px) { .solvable__main { margin-inline-start: 9.508vw; } } @media screen and (min-width: 1220px) { .solvable__main { margin-inline-start: 116px; } } @media screen and (max-width: 767px) { .solvable__lead { font-size: 5.729vw; } } @media screen and (min-width: 768px) { .solvable__lead { font-size: 2.951vw; } } @media screen and (min-width: 1220px) { .solvable__lead { font-size: 36px; } } @media screen and (max-width: 767px) { .solvable__text { font-size: 6.51vw; margin-top: 2.604vw; } } @media screen and (min-width: 768px) { .solvable__text { background: url(../images/solvable_marker.svg) 0 95% no-repeat; background-size: 39.098vw auto; font-size: 3.279vw; margin-top: 1.23vw; padding-bottom: 4.426vw; } } @media screen and (min-width: 1220px) { .solvable__text { background-size: 477px auto; font-size: 40px; margin-top: 15px; padding-bottom: 54px; } } .solvable__em { color: var(--color-tertiary); } @media screen and (max-width: 767px) { .solvable__em { background: url(../images/solvable_marker.svg) 0 95% no-repeat; background-size: 59.115vw auto; display: inline-block; font-size: 14.844vw; padding-bottom: 7.161vw; } } @media screen and (min-width: 768px) { .solvable__em { font-size: 7.377vw; } } @media screen and (min-width: 1220px) { .solvable__em { font-size: 90px; } } .since { font-weight: 700; text-align: center; } @media screen and (max-width: 767px) { .since { margin-top: 9.115vw; } } @media screen and (min-width: 768px) { .since { margin-top: 4.918vw; } } @media screen and (min-width: 1220px) { .since { margin-top: 60px; } } .since__lead { background: var(--color-font); color: #fff; display: inline-block; letter-spacing: 0.05em; position: relative; } @media screen and (max-width: 767px) { .since__lead { border-radius: 4.297vw; font-size: 4.167vw; line-height: 2.166; padding: 0 4.948vw; } } @media screen and (min-width: 768px) { .since__lead { border-radius: 2.459vw; font-size: 2.541vw; line-height: 2.032; padding: 0 2.295vw; } } @media screen and (min-width: 1220px) { .since__lead { border-radius: 30px; font-size: 31px; padding: 0 28px; } } .since__lead::after { background: var(--color-font); bottom: 0; content: ""; display: block; left: 45%; position: absolute; transform: rotate(-45deg) translateY(70%); } @media screen and (max-width: 767px) { .since__lead::after { height: 4.818vw; width: 2px; } } @media screen and (min-width: 768px) { .since__lead::after { height: 2.459vw; width: 3px; } } @media screen and (min-width: 1220px) { .since__lead::after { height: 30px; } } .since__text { color: #fff; line-height: 1.4; } @media screen and (max-width: 767px) { .since__text { font-size: 5.729vw; } } @media screen and (min-width: 768px) { .since__text { font-size: 3.279vw; } } @media screen and (min-width: 1220px) { .since__text { font-size: 40px; } } @media screen and (max-width: 767px) { .since__text--01 { margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .since__text--01 { margin-top: 2.459vw; } } @media screen and (min-width: 1220px) { .since__text--01 { margin-top: 30px; } } @media screen and (max-width: 767px) { .since__text--02 { margin-top: -0.651vw; } } @media screen and (min-width: 768px) { .since__text--02 { margin-top: -0.41vw; } } @media screen and (min-width: 1220px) { .since__text--02 { margin-top: -5px; } } .sales { align-items: center; display: flex; justify-content: center; } @media screen and (max-width: 767px) { .sales { margin-top: -1.302vw; } } @media screen and (min-width: 768px) { .sales { margin-top: -0.82vw; } } @media screen and (min-width: 1220px) { .sales { margin-top: -10px; } } .sales__title { align-items: center; background: #fff; border-radius: 50%; color: #f7931e; display: flex; letter-spacing: 0.05em; justify-content: center; padding-bottom: 0.25em; } @media screen and (max-width: 767px) { .sales__title { font-size: 4.102vw; height: 17.044vw; line-height: 1.152; width: 17.044vw; } } @media screen and (min-width: 768px) { .sales__title { font-size: 2.377vw; height: 9.754vw; line-height: 1.138; width: 9.754vw; } } @media screen and (min-width: 1220px) { .sales__title { font-size: 29px; height: 119px; width: 119px; } } .sales__data { color: #fff; } @media screen and (max-width: 767px) { .sales__data { font-size: 5.729vw; } } @media screen and (min-width: 768px) { .sales__data { font-size: 3.279vw; } } @media screen and (min-width: 1220px) { .sales__data { font-size: 40px; } } @media screen and (max-width: 767px) { .sales__num { font-size: 21.484vw; letter-spacing: 0.015em; } } @media screen and (min-width: 768px) { .sales__num { font-size: 12.295vw; letter-spacing: -0.025em; } } @media screen and (min-width: 1220px) { .sales__num { font-size: 150px; } } .sales__yen { letter-spacing: 0.03em; margin-inline-start: 0.125em; } @media screen and (max-width: 767px) { .sales__yen { font-size: 9.635vw; } } @media screen and (min-width: 768px) { .sales__yen { font-size: 5.492vw; } } @media screen and (min-width: 1220px) { .sales__yen { font-size: 67px; } } @media screen and (max-width: 767px) { .know-how { font-size: 8.385vw; line-height: 1.413; margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .know-how { font-size: 4.098vw; line-height: 1.4; } } @media screen and (min-width: 1220px) { .know-how { font-size: 50px; } } @media screen and (max-width: 767px) { .know-how--01 { margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .know-how--01 { margin-top: 1.639vw; } } @media screen and (min-width: 1220px) { .know-how--01 { margin-top: 30px; } } .know-how--01 .know-how__mark { padding-left: 0 !important; } @media screen and (max-width: 767px) { .know-how--02 { margin-top: 1.042vw; } } @media screen and (min-width: 768px) { .know-how--02 { margin-top: 0.656vw; } } @media screen and (min-width: 1220px) { .know-how--02 { margin-top: 8px; } } .know-how__mark { background: var(--color-font); color: #fff; padding: 0 0.3em; } .know-how__em { color: var(--color-tertiary); } /* solution */ @media screen and (max-width: 767px) { .solution { background: url(../images/solution_bg_sp.jpg) 0/100% 100% no-repeat; height: 247.396vw; padding-top: 9.766vw; } } @media screen and (min-width: 768px) { .solution { background: url(../images/solution_bg_pc.jpg) 50% 0/auto 100% no-repeat #fabc43; height: 73.77vw; padding-top: 6.557vw; } } @media screen and (min-width: 1220px) { .solution { height: 900px; padding-top: 80px; } } .title--solution { color: #fff; } .hgroup__lead--solution { color: #fff; } @media screen and (max-width: 767px) { .hgroup__lead--solution { font-size: 5.469vw; margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .hgroup__lead--solution { font-size: 2.951vw; margin-top: 2.459vw; } } @media screen and (min-width: 1220px) { .hgroup__lead--solution { font-size: 36px; margin-top: 30px; } } .hgroup__lead--solution::after { background-image: radial-gradient(circle farthest-side, #fff, #fff 38%, transparent 45%, transparent); } .solution__list { display: grid; margin-inline: auto; } @media screen and (max-width: 767px) { .solution__list { grid-template-columns: 1fr; gap: 4.557vw; margin-top: 9.115vw; width: 71.615vw; } } @media screen and (min-width: 768px) { .solution__list { grid-template-columns: repeat(2, 1fr); gap: 2.459vw 4.098vw; margin-top: 5.328vw; width: 69.18vw; } } @media screen and (min-width: 1220px) { .solution__list { gap: 30px 50px; margin-top: 65px; width: 844px; } } .solution__card { align-items: center; background: rgba(246, 97, 0, 0.8); border: solid #fff; display: flex; flex-direction: column; justify-content: center; position: relative; } @media screen and (max-width: 767px) { .solution__card { border-width: 2px 0 0 2px; gap: 2.604vw; min-height: 43.75vw; padding: 3.906vw; } } @media screen and (min-width: 768px) { .solution__card { border-width: 3px 0 0 3px; gap: 1.23vw; min-height: 17.213vw; padding: 1.639vw 1.639vw 1.23vw; } } @media screen and (min-width: 1220px) { .solution__card { gap: 15px; min-height: 240px; padding: 20px 20px 15px; } } .solution__card::before { background: rgba(255, 255, 255, 0.1); clip-path: polygon(100% 0, 0% 100%, 100% 100%); content: ""; display: block; height: 100%; inset: 0; position: absolute; width: 100%; } .solution__name { color: #fff; font-weight: 700; letter-spacing: 0.05em; line-height: 1.4; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .solution__name { font-size: 4.688vw; } } @media screen and (min-width: 768px) { .solution__name { font-size: 2.131vw; } } @media screen and (min-width: 1220px) { .solution__name { font-size: 26px; } } .solution__name::after { background: #fff; content: ""; display: block; height: 1px; margin-inline: auto; } @media screen and (max-width: 767px) { .solution__name::after { margin-top: 2.604vw; width: 5.469vw; } } @media screen and (min-width: 768px) { .solution__name::after { margin-top: 1.23vw; width: 2.459vw; } } @media screen and (min-width: 1220px) { .solution__name::after { margin-top: 15px; width: 30px; } } .solution__text { color: #fff; font-weight: 500; letter-spacing: 0.05em; position: relative; text-align: center; z-index: 5; } @media screen and (max-width: 767px) { .solution__text { line-height: 1.786; } } @media screen and (min-width: 768px) { .solution__text { font-size: 1.639vw; line-height: 1.8; } } @media screen and (min-width: 1220px) { .solution__text { font-size: 20px; } } /* results */ @media screen and (max-width: 767px) { .results { padding-top: 11.719vw; } } @media screen and (min-width: 768px) { .results { background: url(../images/results_bg_pc.jpg) 50% 0 no-repeat; background-size: 213.115vw auto; padding-top: 7.787vw; } } @media screen and (min-width: 1220px) { .results { background-size: inherit; padding-top: 95px; } } .title--results { color: var(--color-primary); } @media screen and (max-width: 767px) { .hgroup__lead--results { font-size: 5.469vw; margin-top: 3.906vw; } } @media screen and (min-width: 768px) { .hgroup__lead--results { font-size: 3.443vw; margin-top: 2.049vw; } } @media screen and (min-width: 1220px) { .hgroup__lead--results { font-size: 42px; margin-top: 25px; } } .reason__list { display: flex; flex-direction: column; } @media screen and (max-width: 767px) { .reason__list { gap: 8.464vw; margin-top: 8.464vw; } } @media screen and (min-width: 768px) { .reason__list { gap: 4.918vw; margin-top: 8.197vw; } } @media screen and (min-width: 1220px) { .reason__list { gap: 60px; margin-top: 100px; } } .case__contents { position: relative; } @media screen and (min-width: 768px) { .case__contents::before { background: 0/cover no-repeat; bottom: 0; content: ""; height: 100%; position: absolute; width: 139.344vw; } } @media screen and (min-width: 1220px) { .case__contents::before { width: 1700px; } } .case__num { margin-inline: auto; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .case__num { width: 45.573vw; } } @media screen and (min-width: 768px) { .case__num { width: 22.295vw; } } @media screen and (min-width: 1220px) { .case__num { width: 272px; } } .case__catch { font-weight: 700; letter-spacing: 0.01em; position: relative; text-decoration: underline; text-decoration-color: #fff; text-decoration-skip-ink: none; text-decoration-thickness: 0.08em; text-underline-offset: 0.3em; z-index: 5; } @media screen and (max-width: 767px) { .case__catch { font-size: 5.729vw; line-height: 1.727; width: 77.865vw; } } @media screen and (min-width: 768px) { .case__catch { font-size: 3.115vw; line-height: 1.632; } } @media screen and (min-width: 1220px) { .case__catch { font-size: 38px; } } .case__sup { position: relative; } @media screen and (max-width: 767px) { .case__sup { font-size: 3.385vw; } } @media screen and (min-width: 768px) { .case__sup { font-size: 1.148vw; } } @media screen and (min-width: 1220px) { .case__sup { font-size: 14px; } } .case__sup-text { left: 0; position: absolute; } @media screen and (max-width: 767px) { .case__sup-text { top: -1em; } } @media screen and (min-width: 768px) { .case__sup-text { top: -1.5em; } } .case__text { font-weight: 700; letter-spacing: 0.05em; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .case__text { line-height: 1.643; margin-top: 3.906vw; } } @media screen and (min-width: 768px) { .case__text { font-size: 1.393vw; line-height: 1.765; margin-top: 2.869vw; } } @media screen and (min-width: 1220px) { .case__text { font-size: 17px; margin-top: 35px; } } .case__notes { letter-spacing: 0.05em; line-height: 1.6; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .case__notes { font-size: 2.604vw; margin-top: 2.604vw; } } @media screen and (min-width: 768px) { .case__notes { font-size: 0.984vw; margin-top: 1.23vw; } } @media screen and (min-width: 1220px) { .case__notes { font-size: 12px; margin-top: 15px; } } .case__image { z-index: 5; } @media screen and (max-width: 767px) { .case__image { box-shadow: 2.995vw 4.297vw 3.385vw rgba(0, 0, 0, 0.2); position: relative; } } @media screen and (min-width: 768px) { .case__image { box-shadow: 1.475vw 2.131vw 1.639vw rgba(0, 0, 0, 0.2); position: absolute; } } @media screen and (min-width: 1220px) { .case__image { box-shadow: 18px 26px 20px rgba(0, 0, 0, 0.2); } } @media screen and (max-width: 767px) { .case--01 { background: url(../images/case01_bg_sp.jpg) 0/100% 100% no-repeat; height: 152.344vw; margin-top: 9.115vw; } } @media screen and (min-width: 768px) { .case--01 { margin-top: 6.148vw; } } @media screen and (min-width: 1220px) { .case--01 { margin-top: 75px; } } @media screen and (min-width: 768px) { .case--01 .case__contents { height: 39.344vw; } } @media screen and (min-width: 1220px) { .case--01 .case__contents { height: 480px; } } @media screen and (min-width: 768px) { .case--01 .case__contents::before { background-image: url(../images/case01_bg_pc_01.jpg); left: -12.295vw; } } @media screen and (min-width: 1220px) { .case--01 .case__contents::before { left: -150px; } } @media screen and (max-width: 767px) { .case--01 .case__catch, .case--01 .case__text, .case--01 .case__notes { margin-inline-start: 15.625vw; } } @media screen and (min-width: 768px) { .case--01 .case__catch, .case--01 .case__text, .case--01 .case__notes { margin-inline-start: 4.098vw; width: 40.984vw; } } @media screen and (min-width: 1220px) { .case--01 .case__catch, .case--01 .case__text, .case--01 .case__notes { margin-inline-start: 50px; width: 500px; } } @media screen and (min-width: 768px) { .case--01 .case__catch { font-size: 2.951vw; margin-top: -1.23vw; } } @media screen and (min-width: 1220px) { .case--01 .case__catch { font-size: 36px; margin-top: -15px; } } @media screen and (max-width: 767px) { .case__image--case01 { margin-inline-start: 15.625vw; margin-top: 3.906vw; width: 78.125vw; } } @media screen and (min-width: 768px) { .case__image--case01 { bottom: 5.41vw; right: 4.098vw; width: 42.295vw; } } @media screen and (min-width: 1220px) { .case__image--case01 { bottom: 66px; right: 50px; width: 516px; } } @media screen and (max-width: 767px) { .case--02 { background: url(../images/case02_bg_sp.jpg) 0/100% 100% no-repeat; height: 184.896vw; } } @media screen and (min-width: 768px) { .case--02 { background: url(../images/case02_bg_pc_02.jpg) 50% 0 no-repeat; background-size: 213.115vw auto; padding-top: 8.197vw; } } @media screen and (min-width: 1220px) { .case--02 { background-size: inherit; padding-top: 100px; } } @media screen and (min-width: 768px) { .case--02 .case__contents { height: 46.721vw; } } @media screen and (min-width: 1220px) { .case--02 .case__contents { height: 570px; } } @media screen and (min-width: 768px) { .case--02 .case__contents::before { background-image: url(../images/case02_bg_pc_01.jpg); right: -12.295vw; } } @media screen and (min-width: 1220px) { .case--02 .case__contents::before { right: -150px; } } @media screen and (max-width: 767px) { .case--02 .case__catch, .case--02 .case__text, .case--02 .case__notes { margin-inline-start: 7.552vw; } } @media screen and (min-width: 768px) { .case--02 .case__catch, .case--02 .case__text, .case--02 .case__notes { margin-inline-start: 38.525vw; width: 47.541vw; } } @media screen and (min-width: 1220px) { .case--02 .case__catch, .case--02 .case__text, .case--02 .case__notes { margin-inline-start: 470px; width: 580px; } } @media screen and (min-width: 768px) { .case--02 .case__catch { margin-top: 4.098vw; } } @media screen and (min-width: 1220px) { .case--02 .case__catch { margin-top: 50px; } } .case__image--case02-01 { z-index: 10; } @media screen and (max-width: 767px) { .case__image--case02-01 { margin-inline-start: 17.448vw; margin-top: 5.859vw; width: 44.01vw; } } @media screen and (min-width: 768px) { .case__image--case02-01 { left: 4.098vw; top: 6.557vw; width: 21.311vw; } } @media screen and (min-width: 1220px) { .case__image--case02-01 { left: 50px; top: 80px; width: 260px; } } @media screen and (max-width: 767px) { .case__image--case02-02 { margin-inline-start: 51.042vw; margin-top: -29.688vw; width: 30.208vw; } } @media screen and (min-width: 768px) { .case__image--case02-02 { bottom: 3.934vw; left: 20.082vw; width: 14.672vw; } } @media screen and (min-width: 1220px) { .case__image--case02-02 { bottom: 48px; left: 245px; width: 179px; } } @media screen and (max-width: 767px) { .case--03 { background: url(../images/case03_bg_sp.jpg) 0/100% 100% no-repeat; height: 174.479vw; } } @media screen and (min-width: 768px) { .case--03 { margin-top: 8.197vw; } } @media screen and (min-width: 1220px) { .case--03 { margin-top: 100px; } } @media screen and (min-width: 768px) { .case--03 .case__contents { height: 44.262vw; } } @media screen and (min-width: 1220px) { .case--03 .case__contents { height: 540px; } } @media screen and (min-width: 768px) { .case--03 .case__contents::before { background-image: url(../images/case03_bg_pc_01.jpg); left: -12.295vw; } } @media screen and (min-width: 1220px) { .case--03 .case__contents::before { left: -150px; } } @media screen and (max-width: 767px) { .case--03 .case__catch, .case--03 .case__text, .case--03 .case__notes { margin-inline-start: 15.625vw; } } @media screen and (min-width: 768px) { .case--03 .case__catch, .case--03 .case__text, .case--03 .case__notes { margin-inline-start: 4.098vw; width: 54.098vw; } } @media screen and (min-width: 1220px) { .case--03 .case__catch, .case--03 .case__text, .case--03 .case__notes { margin-inline-start: 50px; width: 660px; } } @media screen and (max-width: 767px) { .case__image--case03 { margin-inline-start: 20.182vw; margin-top: 3.906vw; width: 67.708vw; } } @media screen and (min-width: 768px) { .case__image--case03 { bottom: 8.197vw; right: 4.098vw; width: 27.049vw; } } @media screen and (min-width: 1220px) { .case__image--case03 { bottom: 100px; right: 50px; width: 330px; } } @media screen and (max-width: 767px) { .commit { background: url(../images/commit_bg_sp.jpg) 0 100%/100% auto no-repeat; padding: 11.719vw 0 18.88vw; } } @media screen and (min-width: 768px) { .commit { background: url(../images/commit_bg_pc.jpg) 50% 100% no-repeat; background-size: 213.115vw auto; padding: 5.738vw 0; } } @media screen and (min-width: 1220px) { .commit { background-size: inherit; padding: 70px 0; } } .commit__lead { font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .commit__lead { font-size: 5.729vw; line-height: 1.5; } } @media screen and (min-width: 768px) { .commit__lead { font-size: 2.623vw; line-height: 1.375; } } @media screen and (min-width: 1220px) { .commit__lead { font-size: 32px; } } .commit__text { font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .commit__text { font-size: 8.385vw; line-height: 1.413; margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .commit__text { font-size: 3.607vw; line-height: 1.477; margin-top: 1.639vw; } } @media screen and (min-width: 1220px) { .commit__text { font-size: 44px; margin-top: 20px; } } .commit__mark { background: var(--color-primary); color: #fff; margin: 0 0.2em; padding: 0 0.2em; } @media screen and (max-width: 767px) { .commit__mark--bottom { display: inline-block; margin-top: 2.604vw; } } /* reason */ .reason { background-color: #ffcc29; background-repeat: no-repeat; } @media screen and (max-width: 767px) { .reason { background-image: url(../images/reason_bg_sp_01.png), url(../images/reason_bg_sp_02.png); background-position: 0 0, 0 100%; background-size: 100% auto; padding: 12.37vw 0 14.323vw; } } @media screen and (min-width: 768px) { .reason { background-image: url(../images/reason_bg_pc_01.png), url(../images/reason_bg_pc_02.png); background-position: 50% 0, 50% 100%; background-size: 163.934vw auto; padding: 7.787vw 0 9.016vw; } } @media screen and (min-width: 1220px) { .reason { background-size: inherit; padding: 95px 0 110px; } } .title--reason { color: #fff; } .hgroup__lead--reason { letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .hgroup__lead--reason { font-size: 5.729vw; margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .hgroup__lead--reason { font-size: 3.607vw; margin-top: 1.639vw; } } @media screen and (min-width: 1220px) { .hgroup__lead--reason { font-size: 44px; margin-top: 20px; } } .hgroup__lead--reason::after { background-image: radial-gradient(circle farthest-side, #fff, #fff 38%, transparent 45%, transparent); } .reason__list { display: flex; flex-direction: column; } @media screen and (max-width: 767px) { .reason__list { gap: 8.464vw; margin-top: 8.464vw; } } @media screen and (min-width: 768px) { .reason__list { gap: 4.918vw; margin-top: 8.197vw; } } @media screen and (min-width: 1220px) { .reason__list { gap: 60px; margin-top: 100px; } } .point__row { display: flex; position: relative; } @media screen and (max-width: 767px) { .point__row { flex-direction: column; gap: 5.859vw; padding-bottom: 8.464vw; } } @media screen and (min-width: 768px) { .point__row { justify-content: space-between; } } .point__row::before, .point__row::after { content: ""; display: block; position: absolute; } .point__row::before { background-color: #ffcc28; background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.2) 0%, #fff 89.39%); } @media screen and (max-width: 767px) { .point__row::before { bottom: 0; box-shadow: 1.563vw 3.125vw 3.125vw rgba(255, 204, 40, 0.4); height: 51.432vw; width: 109.375vw; } } @media screen and (min-width: 768px) { .point__row::before { box-shadow: 0.984vw 1.967vw 1.967vw rgba(255, 204, 40, 0.4); height: 32.377vw; top: 5.328vw; width: 68.852vw; } } @media screen and (min-width: 1220px) { .point__row::before { box-shadow: 12px 24px 24px rgba(255, 204, 40, 0.4); height: 395px; top: 65px; width: 840px; } } .point__row::after { background: url(../images/point_bg.png) 0/contain no-repeat; } @media screen and (max-width: 767px) { .point__row::after { bottom: -19.922vw; height: 52.995vw; width: 52.995vw; } } @media screen and (min-width: 768px) { .point__row::after { height: 33.361vw; top: 16.803vw; width: 33.361vw; } } @media screen and (min-width: 1220px) { .point__row::after { height: 407px; top: 205px; width: 407px; } } @media screen and (max-width: 767px) { .point__contents { margin-inline: auto; width: 86.979vw; } } @media screen and (max-width: 767px) { .point__num { text-align: center; } } .point__num-image { width: auto; } @media screen and (max-width: 767px) { .point__num-image { height: 18.62vw; } } @media screen and (min-width: 768px) { .point__num-image { height: 10.82vw; } } @media screen and (min-width: 1220px) { .point__num-image { height: 132px; } } .point__title-num { letter-spacing: 0; } @media screen and (max-width: 767px) { .point__title-num { font-size: 6.966vw; } } @media screen and (min-width: 768px) { .point__title-num { font-size: 3.443vw; } } @media screen and (min-width: 1220px) { .point__title-num { font-size: 42px; } } .point__catch { font-weight: 700; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .point__catch { font-size: 7.813vw; line-height: 1.54; margin-top: 3.385vw; } } @media screen and (min-width: 768px) { .point__catch { font-size: 3.607vw; line-height: 1.5; margin-top: 2.459vw; } } @media screen and (min-width: 1220px) { .point__catch { font-size: 44px; margin-top: 30px; } } .point__catch-mark { background: #fff; margin-left: -0.25em; padding: 0 0.25em; } .point__text { letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .point__text { line-height: 1.929; margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .point__text { font-size: 1.557vw; line-height: 1.895; margin-top: 1.639vw; } } @media screen and (min-width: 1220px) { .point__text { font-size: 19px; margin-top: 20px; } } @media screen and (max-width: 767px) { .point__text-em { font-size: 4.427vw; } } @media screen and (min-width: 768px) { .point__text-em { font-size: 1.803vw; } } @media screen and (min-width: 1220px) { .point__text-em { font-size: 22px; } } .point__feature { position: relative; z-index: 5; } @media screen and (max-width: 767px) { .point__feature { width: 84.635vw; } } @media screen and (min-width: 768px) { .point__feature { padding-bottom: 5.328vw; width: 53.279vw; } } @media screen and (min-width: 1220px) { .point__feature { padding-bottom: 65px; width: 650px; } } @media screen and (max-width: 767px) { .point__image { box-shadow: 1.563vw 3.125vw 3.125vw rgba(73, 73, 73, 0.4); } } @media screen and (min-width: 768px) { .point__image { box-shadow: 0.984vw 1.967vw 1.967vw rgba(73, 73, 73, 0.4); } } @media screen and (min-width: 1220px) { .point__image { box-shadow: 12px 24px 24px rgba(73, 73, 73, 0.4); } } .point__feature-deco { position: absolute; } .point__deco-cross { position: absolute; } @media screen and (max-width: 767px) { .point__deco-cross { width: 18.099vw; } } @media screen and (min-width: 768px) { .point__deco-cross { width: 11.393vw; } } @media screen and (min-width: 1220px) { .point__deco-cross { width: 139px; } } @media screen and (max-width: 767px) { .point:nth-child(odd) .point__row::before { left: 33.203vw; } } @media screen and (min-width: 768px) { .point:nth-child(odd) .point__row::before { right: -36.885vw; } } @media screen and (min-width: 1220px) { .point:nth-child(odd) .point__row::before { right: -450px; } } @media screen and (max-width: 767px) { .point:nth-child(odd) .point__row::after { left: 71.094vw; } } @media screen and (min-width: 768px) { .point:nth-child(odd) .point__row::after { right: -25vw; } } @media screen and (min-width: 1220px) { .point:nth-child(odd) .point__row::after { right: -305px; } } @media screen and (min-width: 768px) { .point:nth-child(odd) .point__contents { margin-inline-start: 4.918vw; width: 34.426vw; } } @media screen and (min-width: 1220px) { .point:nth-child(odd) .point__contents { margin-inline-start: 60px; width: 420px; } } @media screen and (min-width: 768px) { .point:nth-child(odd) .point__text { margin-inline-start: auto; width: 33.607vw; } } @media screen and (min-width: 1220px) { .point:nth-child(odd) .point__text { width: 410px; } } @media screen and (max-width: 767px) { .point:nth-child(odd) .point__feature { margin-inline-start: 7.031vw; } } @media screen and (min-width: 768px) { .point:nth-child(odd) .point__feature { margin-inline-end: -4.918vw; } } @media screen and (min-width: 1220px) { .point:nth-child(odd) .point__feature { margin-inline-end: -60px; } } @media screen and (min-width: 768px) { .point:nth-child(even) .point__row { flex-direction: row-reverse; } } @media screen and (max-width: 767px) { .point:nth-child(even) .point__row::before { left: -41.667vw; } } @media screen and (min-width: 768px) { .point:nth-child(even) .point__row::before { left: -36.885vw; } } @media screen and (min-width: 1220px) { .point:nth-child(even) .point__row::before { left: -450px; } } @media screen and (max-width: 767px) { .point:nth-child(even) .point__row::after { left: -25vw; } } @media screen and (min-width: 768px) { .point:nth-child(even) .point__row::after { left: -26.23vw; } } @media screen and (min-width: 1220px) { .point:nth-child(even) .point__row::after { left: -320px; } } @media screen and (min-width: 768px) { .point:nth-child(even) .point__contents { margin-inline-end: 0; margin-inline-start: auto; width: 37.705vw; } } @media screen and (min-width: 1220px) { .point:nth-child(even) .point__contents { width: 460px; } } @media screen and (min-width: 768px) { .point:nth-child(even) .point__num { margin-left: -0.82vw; } } @media screen and (min-width: 1220px) { .point:nth-child(even) .point__num { margin-left: -10px; } } @media screen and (min-width: 768px) { .point:nth-child(even) .point__text { margin-inline-start: auto; width: 36.885vw; } } @media screen and (min-width: 1220px) { .point:nth-child(even) .point__text { width: 450px; } } @media screen and (max-width: 767px) { .point:nth-child(even) .point__feature { margin-inline-start: 8.854vw; } } @media screen and (min-width: 768px) { .point:nth-child(even) .point__feature { margin-inline-start: -4.918vw; } } @media screen and (min-width: 1220px) { .point:nth-child(even) .point__feature { margin-inline-start: -60px; } } @media screen and (max-width: 767px) { .point--02 .point__feature-deco { left: 8.464vw; top: -7.161vw; width: 70.573vw; } } @media screen and (min-width: 768px) { .point--02 .point__feature-deco { left: 5.328vw; top: -4.508vw; width: 44.426vw; } } @media screen and (min-width: 1220px) { .point--02 .point__feature-deco { left: 65px; top: -55px; width: 542px; } } @media screen and (max-width: 767px) { .point--03 .point__deco-cross { right: 7.161vw; top: 2.604vw; } } @media screen and (min-width: 768px) { .point--03 .point__deco-cross { left: 33.197vw; top: -4.754vw; } } @media screen and (min-width: 1220px) { .point--03 .point__deco-cross { left: 405px; top: -58px; } } @media screen and (min-width: 768px) { .point--03 .point__catch { width: 35.246vw; } } @media screen and (min-width: 1220px) { .point--03 .point__catch { width: 430px; } } .point--03 .point__catch-mark { margin-inline-end: 0.2em; } @media screen and (max-width: 767px) { .chart { margin-top: 15.625vw; } } @media screen and (min-width: 768px) { .chart { margin-top: 6.557vw; } } @media screen and (min-width: 1220px) { .chart { margin-top: 80px; } } .chart__title { color: #ffe4a7; font-weight: 600; letter-spacing: 0.13em; text-align: center; } @media screen and (max-width: 767px) { .chart__title { font-size: 13.021vw; } } @media screen and (min-width: 768px) { .chart__title { font-size: 8.197vw; } } @media screen and (min-width: 1220px) { .chart__title { font-size: 100px; } } .chart__box { background: #ffe4a7; margin-inline: auto; } @media screen and (max-width: 767px) { .chart__box { margin-top: -2.604vw; padding: 5.208vw 0 8.464vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .chart__box { margin-top: -1.639vw; padding: 3.279vw 0 4.918vw; } } @media screen and (min-width: 1220px) { .chart__box { margin-top: -20px; padding: 40px 0 60px; } } .chart-lead { align-items: center; display: flex; justify-content: center; } @media screen and (max-width: 767px) { .chart-lead { flex-wrap: wrap; } } .chart-lead__words { background: #f6901d; color: #fff; font-weight: 700; letter-spacing: 0.05em; position: relative; } @media screen and (max-width: 767px) { .chart-lead__words { border-radius: 3.906vw; line-height: 1.906; padding: 0 3.646vw; } } @media screen and (min-width: 768px) { .chart-lead__words { border-radius: 2.049vw; font-size: 1.885vw; line-height: 1.933; padding: 0 2.049vw; } } @media screen and (min-width: 1220px) { .chart-lead__words { border-radius: 25px; font-size: 23px; padding: 0 25px; } } .chart-lead__words::after { background: #f6901d; bottom: 0; content: ""; display: block; position: absolute; } @media screen and (max-width: 767px) { .chart-lead__words::after { height: 4.818vw; width: 2px; } } @media screen and (min-width: 768px) { .chart-lead__words::after { height: 2.459vw; width: 3px; } } @media screen and (min-width: 1220px) { .chart-lead__words::after { height: 30px; } } @media screen and (max-width: 767px) { .chart-lead__words--01 { margin-inline-end: -1.563vw; } } @media screen and (min-width: 768px) { .chart-lead__words--01 { margin-inline-end: -0.82vw; margin-top: -1.803vw; } } @media screen and (min-width: 1220px) { .chart-lead__words--01 { margin-inline-end: -10px; margin-top: -22px; } } .chart-lead__words--01::after { left: 46%; transform: rotate(-45deg) translateY(70%); } @media screen and (max-width: 767px) { .chart-lead__words--02 { margin-inline-start: -1.563vw; margin-top: 3.906vw; } } @media screen and (min-width: 768px) { .chart-lead__words--02 { margin-inline-start: -0.82vw; } } @media screen and (min-width: 1220px) { .chart-lead__words--02 { margin-inline-start: -10px; } } .chart-lead__words--02::after { left: 58%; transform: rotate(45deg) translateY(70%); } .chart-lead__words-label { position: relative; z-index: 5; } .chart-lead__text { font-weight: 500; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .chart-lead__text { font-size: 3.646vw; margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .chart-lead__text { font-size: 1.803vw; margin-inline-start: 1.148vw; } } @media screen and (min-width: 1220px) { .chart-lead__text { font-size: 22px; margin-inline-start: 14px; } } .chart__catch { font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .chart__catch { font-size: 6.25vw; line-height: 1.333; margin-top: 1.302vw; } } @media screen and (min-width: 768px) { .chart__catch { font-size: 3.279vw; line-height: 1.2; margin-top: 1.639vw; } } @media screen and (min-width: 1220px) { .chart__catch { font-size: 40px; margin-top: 20px; } } .table { display: grid; grid-row: repeat(4, 1fr); margin-inline: auto; } @media screen and (max-width: 767px) { .table { grid-template-columns: 17.578vw 20.833vw repeat(2, 18.229vw); margin-top: 3.255vw; width: 74.87vw; } } @media screen and (min-width: 768px) { .table { grid-template-columns: 15.164vw 18.852vw repeat(2, 15.41vw); margin-top: 3.689vw; width: 64.754vw; } } @media screen and (min-width: 1220px) { .table { grid-template-columns: 185px 230px repeat(2, 188px); margin-top: 45px; width: 790px; } } .table__thead { display: grid; place-content: center; place-items: center; } @media screen and (max-width: 767px) { .table__thead { height: 13.021vw; } } @media screen and (min-width: 768px) { .table__thead { height: 5.738vw; } } @media screen and (min-width: 1220px) { .table__thead { height: 70px; } } .table__thead-text { color: #fff; font-weight: 700; letter-spacing: 0.05em; text-align: center; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .table__thead-text--in-house { font-size: 4.167vw; } } @media screen and (min-width: 768px) { .table__thead-text--in-house { font-size: 2.377vw; } } @media screen and (min-width: 1220px) { .table__thead-text--in-house { font-size: 29px; } } @media screen and (max-width: 767px) { .table__thead-text--other { font-size: 2.344vw; line-height: 1.333; } } @media screen and (min-width: 768px) { .table__thead-text--other { font-size: 1.393vw; line-height: 1.412; } } @media screen and (min-width: 1220px) { .table__thead-text--other { font-size: 20px; } } .table__cell { display: grid; place-content: center; place-items: center; position: relative; } @media screen and (max-width: 767px) { .table__cell { gap: 1.302vw; height: 22.135vw; } } @media screen and (min-width: 768px) { .table__cell { gap: 0.41vw; height: 12.705vw; } } @media screen and (min-width: 1220px) { .table__cell { gap: 5px; height: 155px; } } @media screen and (max-width: 767px) { .table__cell:not(:last-child) { border-bottom: 1px dotted #ffcc28; } } @media screen and (min-width: 768px) { .table__cell:not(:last-child) { border-bottom: 2px dotted #ffcc28; } } @media screen and (max-width: 767px) { .table__icon { width: 4.948vw; } } @media screen and (min-width: 768px) { .table__icon { width: 4.18vw; } } @media screen and (min-width: 1220px) { .table__icon { width: 51px; } } .table__text { margin-inline: auto; text-align: center; } .table__text--header { font-weight: 700; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .table__text--header { font-size: 2.865vw; line-height: 1.364; width: 14.323vw; } } @media screen and (min-width: 768px) { .table__text--header { font-size: 1.534vw; line-height: 1.538; width: 13.934vw; } } @media screen and (min-width: 1220px) { .table__text--header { font-size: 18px; width: 170px; } } .table__text--in-house { font-weight: 700; letter-spacing: 0.03em; } @media screen and (max-width: 767px) { .table__text--in-house { font-size: 2.344vw; line-height: 1.444; width: 18.229vw; } } @media screen and (min-width: 768px) { .table__text--in-house { font-size: 1.393vw; line-height: 1.471; width: 15.574vw; } } @media screen and (min-width: 1220px) { .table__text--in-house { font-size: 17px; width: 190px; } } @media screen and (max-width: 767px) { .table__text--other { font-size: 2.083vw; line-height: 1.375; width: 15.625vw; } } @media screen and (min-width: 768px) { .table__text--other { font-size: 1.23vw; letter-spacing: 0.03em; line-height: 1.467; width: 11.885vw; } } @media screen and (min-width: 1220px) { .table__text--other { font-size: 15px; width: 145px; } } .table__col--header .table__cell { background: #ffbc22; } .table__col--header .table__cell:not(:last-child) { border-bottom-color: #fff; } @media screen and (max-width: 767px) { .table__col--header .table__cell:nth-of-type(2) { border-top-left-radius: 2.773vw; } } @media screen and (min-width: 768px) { .table__col--header .table__cell:nth-of-type(2) { border-top-left-radius: 2.361vw; } } @media screen and (min-width: 1220px) { .table__col--header .table__cell:nth-of-type(2) { border-top-left-radius: 28px; } } @media screen and (max-width: 767px) { .table__col--header .table__cell:last-child { border-bottom-left-radius: 2.773vw; height: 19.531vw; } } @media screen and (min-width: 768px) { .table__col--header .table__cell:last-child { border-bottom-left-radius: 2.361vw; } } @media screen and (min-width: 1220px) { .table__col--header .table__cell:last-child { border-bottom-left-radius: 18px; } } .table__col--header .table__thead--hidden { background: transparent; } .table__col--in-house { background: var(--color-primary); overflow: hidden; position: relative; } @media screen and (max-width: 767px) { .table__col--in-house { border-radius: 1.38vw; padding: 2px; top: -2px; } } @media screen and (min-width: 768px) { .table__col--in-house { border-radius: 1.18vw; margin-top: -13%; padding: 0.328vw; } } @media screen and (min-width: 1220px) { .table__col--in-house { border-radius: 14.4px; padding: 4px; } } .table__col--in-house .table__thead { position: relative; } @media screen and (min-width: 768px) { .table__col--in-house .table__thead { height: 7.869vw; } } @media screen and (min-width: 1220px) { .table__col--in-house .table__thead { height: 96px; } } .table__col--in-house .table__thead::before { background: var(--color-primary); content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } @media screen and (max-width: 767px) { .table__col--in-house .table__thead::before { border-radius: 2.083vw; height: calc(100% + 2px); left: -2px; top: -2px; width: calc(100% + 4px); } } @media screen and (min-width: 768px) { .table__col--in-house .table__thead::before { border-radius: 1.77vw; height: calc(100% + 0.328vw); left: -0.328vw; top: -0.328vw; width: calc(100% + 0.656vw); } } @media screen and (min-width: 1220px) { .table__col--in-house .table__thead::before { border-radius: 21.6px; height: calc(100% + 4px); left: -4px; top: -4px; width: calc(100% + 8px); } } .table__col--in-house .table__cell { background: #fff; } @media screen and (max-width: 767px) { .table__col--in-house .table__cell:last-child { border-bottom-left-radius: 1.38vw; border-bottom-right-radius: 1.38vw; height: 23.438vw; } } @media screen and (min-width: 768px) { .table__col--in-house .table__cell:last-child { border-bottom-left-radius: 1.148vw; border-bottom-right-radius: 1.148vw; height: 13.525vw; } } @media screen and (min-width: 1220px) { .table__col--in-house .table__cell:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; height: 165px; } } .table__col--other .table__thead { position: relative; } .table__col--other .table__thead::before { background: #beb8b3; bottom: 0; content: ""; display: block; height: 100%; left: 50%; position: absolute; transform: translateX(-50%); } @media screen and (max-width: 767px) { .table__col--other .table__thead::before { border-top-left-radius: 2.083vw; border-top-right-radius: 2.083vw; width: 91.4%; } } @media screen and (min-width: 768px) { .table__col--other .table__thead::before { border-top-left-radius: 1.77vw; border-top-right-radius: 1.77vw; width: 92.55%; } } @media screen and (min-width: 1220px) { .table__col--other .table__thead::before { border-top-left-radius: 21.6px; border-top-right-radius: 21.6px; } } .table__col--other .table__cell { background: #fff; } @media screen and (max-width: 767px) { .table__col--other .table__cell:last-child { height: 19.531vw; } } @media screen and (max-width: 767px) { .table__col--otherA .table__cell { border-right: 1px dotted #ffcc28; } } @media screen and (min-width: 768px) { .table__col--otherA .table__cell { border-right: 2px dotted #ffcc28; } } @media screen and (max-width: 767px) { .table__col--otherB .table__cell:last-child { border-bottom-right-radius: 2.773vw; } } @media screen and (min-width: 768px) { .table__col--otherB .table__cell:last-child { border-bottom-right-radius: 0.82vw; } } @media screen and (min-width: 1220px) { .table__col--otherB .table__cell:last-child { border-bottom-right-radius: 10px; } } /* plan-flow */ .plan-flow { background-color: #f08500; background-repeat: no-repeat; } @media screen and (max-width: 767px) { .plan-flow { background-image: url(../images/plan-flow_bg_sp_01.jpg), url(../images/plan-flow_bg_sp_02.jpg); background-position: 0 0, 0 100%; background-size: 100% auto; } } @media screen and (min-width: 768px) { .plan-flow { background-image: url(../images/plan-flow_bg_pc_01.jpg), url(../images/plan-flow_bg_pc_02.jpg); background-position: 50% 0, 50% 100%; background-size: 163.934vw auto; } } @media screen and (min-width: 1220px) { .plan-flow { background-size: inherit; } } .plan-flow__contents { position: relative; } @media screen and (max-width: 767px) { .plan-flow__contents { padding: 11.068vw 0 17.578vw; } } @media screen and (min-width: 768px) { .plan-flow__contents { padding: 6.967vw 0 9.016vw; } } @media screen and (min-width: 1220px) { .plan-flow__contents { padding: 85px 0 110px; } } .plan-flow__deco { position: absolute; top: 0; } @media screen and (max-width: 767px) { .plan-flow__deco { left: -1.172vw; width: 21.875vw; } } @media screen and (min-width: 768px) { .plan-flow__deco { left: 12.869vw; width: 13.77vw; } } @media screen and (min-width: 1220px) { .plan-flow__deco { left: 157px; width: 168px; } } .title--plan-flow { color: #fff; } @media screen and (max-width: 767px) { .plan { margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .plan { margin-top: 3.279vw; } } @media screen and (min-width: 1220px) { .plan { margin-top: 40px; } } .plan__text { font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .plan__text { font-size: 3.906vw; line-height: 2.133; margin-inline: auto; margin-top: 7.813vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .plan__text { font-size: 2.131vw; line-height: 2.154; margin-top: 3.689vw; } } @media screen and (min-width: 1220px) { .plan__text { font-size: 26px; margin-top: 45px; } } .plan__text-mark { background: #ffe23b; padding: 0 0.25em; } @media screen and (max-width: 767px) { .plan__text-mark--pc { background: transparent; } } @media screen and (min-width: 768px) { .plan__text-mark--sp { background: transparent; } } @media screen and (max-width: 767px) { .breakdown { margin-inline: auto; margin-top: 5.859vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .breakdown { margin-top: 5.738vw; } } @media screen and (min-width: 1220px) { .breakdown { margin-top: 70px; } } .breakdown__list { display: flex; justify-content: center; } @media screen and (max-width: 767px) { .breakdown__list { background: url(../images/plan_cross.svg) 50% 48% no-repeat; background-size: 7.813vw; flex-wrap: wrap; gap: 8.464vw 7.813vw; } } @media screen and (min-width: 768px) { .breakdown__list { gap: 4.508vw; } } @media screen and (min-width: 1220px) { .breakdown__list { gap: 55px; } } .breakdown__item { align-items: center; background: 0/contain no-repeat; display: flex; justify-content: center; transform: translateZ(0); } @media screen and (max-width: 767px) { .breakdown__item { filter: drop-shadow(1.719vw 3.437vw 3.437vw rgba(173, 41, 0, 0.3)); height: 24.74vw; padding-top: 9.766vw; width: 37.76vw; } } @media screen and (min-width: 768px) { .breakdown__item { filter: drop-shadow(0.984vw 1.967vw 1.967vw rgba(173, 41, 0, 0.3)); height: 13.279vw; padding-top: 4.508vw; position: relative; width: 21.475vw; } } @media screen and (min-width: 1220px) { .breakdown__item { filter: drop-shadow(23px 24px 24px rgba(173, 41, 0, 0.3)); height: 162px; padding-top: 55px; width: 262px; } } @media screen and (min-width: 768px) { .breakdown__item:not(:last-child)::after { background: url(../images/plan_cross.svg) 50%/contain no-repeat; content: ""; display: block; height: 2.213vw; position: absolute; right: -3.443vw; top: 6.557vw; width: 2.213vw; } } @media screen and (min-width: 1220px) { .breakdown__item:not(:last-child)::after { height: 27px; right: -42px; top: 80px; width: 27px; } } @media screen and (max-width: 767px) { .breakdown__item--01 { background-image: url(../images/breakdown_bg_sp_01.png); } } @media screen and (min-width: 768px) { .breakdown__item--01 { background-image: url(../images/breakdown_bg_pc_01.png); } } @media screen and (max-width: 767px) { .breakdown__item--02 { background-image: url(../images/breakdown_bg_sp_02.png); } } @media screen and (min-width: 768px) { .breakdown__item--02 { background-image: url(../images/breakdown_bg_pc_02.png); } } @media screen and (max-width: 767px) { .breakdown__item--03 { background-image: url(../images/breakdown_bg_sp_03.png); } } @media screen and (min-width: 768px) { .breakdown__item--03 { background-image: url(../images/breakdown_bg_pc_03.png); } } .breakdown__label { font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .breakdown__label { font-size: 3.906vw; line-height: 1.32; } } @media screen and (min-width: 768px) { .breakdown__label { font-size: 1.967vw; line-height: 1.333; position: relative; } } @media screen and (min-width: 1220px) { .breakdown__label { font-size: 24px; } } .breakdown__text { color: #fff; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .breakdown__text { line-height: 1.607; margin-inline: auto; margin-top: 5.208vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .breakdown__text { font-size: 1.475vw; line-height: 2; margin-top: 2.869vw; } } @media screen and (min-width: 1220px) { .breakdown__text { font-size: 18px; margin-top: 35px; } } @media screen and (max-width: 767px) { .flow { margin-top: 10.417vw; } } @media screen and (min-width: 768px) { .flow { margin-top: 5.738vw; } } @media screen and (min-width: 1220px) { .flow { margin-top: 70px; } } .step { background: #fff; overflow: hidden; } @media screen and (max-width: 767px) { .step { border-radius: 5.208vw; box-shadow: 1.719vw 3.437vw 3.437vw rgba(173, 41, 0, 0.3); margin-inline: auto; margin-top: 6.51vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .step { border-radius: 3.279vw; box-shadow: 0.984vw 1.967vw 1.967vw rgba(173, 41, 0, 0.3); display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 3.689vw; } } @media screen and (min-width: 1220px) { .step { border-radius: 40px; box-shadow: 23px 24px 24px rgba(173, 41, 0, 0.3); margin-top: 45px; } } .step__item { position: relative; } @media screen and (max-width: 767px) { .step__item { padding: 4.557vw 0 3.906vw 23.438vw; } } @media screen and (min-width: 768px) { .step__item { display: grid; gap: 0.82vw; grid-row: span 3; grid-template-rows: subgrid; padding: 4.098vw 1.639vw 3.279vw; } } @media screen and (min-width: 1220px) { .step__item { gap: 10px; padding: 50px 20px 40px; } } .step__item::before { content: ""; display: block; height: 100%; position: absolute; inset: 0; width: 100%; } .step__item:not(:last-child)::after { content: ""; position: absolute; z-index: 5; } @media screen and (max-width: 767px) { .step__item:not(:last-child)::after { bottom: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); height: 3.906vw; left: 50%; margin-top: -1px; transform: translate(-50%, 100%); width: 7.813vw; } } @media screen and (min-width: 768px) { .step__item:not(:last-child)::after { clip-path: polygon(0 0, 0% 100%, 100% 50%); height: 4.918vw; margin-inline-start: -1px; right: 0; top: 50%; transform: translate(100%, -50%); width: 2.459vw; } } @media screen and (min-width: 1220px) { .step__item:not(:last-child)::after { height: 60px; width: 30px; } } .step__num { font-weight: 700; letter-spacing: 0.1em; text-align: center; z-index: 5; } @media screen and (max-width: 767px) { .step__num { font-size: 5.469vw; left: 2.995vw; position: absolute; width: 20.833vw; } } @media screen and (min-width: 768px) { .step__num { font-size: 2.705vw; position: relative; } } @media screen and (min-width: 1220px) { .step__num { font-size: 33px; } } .step__num::before, .step__num::after { content: ""; display: inline-block; } @media screen and (max-width: 767px) { .step__num::before, .step__num::after { border: 2.5px solid var(--color-font); height: 4.167vw; width: 1.237vw; } } @media screen and (min-width: 768px) { .step__num::before, .step__num::after { border: 3px solid var(--color-font); height: 2.213vw; width: 0.656vw; } } @media screen and (min-width: 1220px) { .step__num::before, .step__num::after { height: 27px; width: 8px; } } .step__num::before { border-right: 0; margin-inline-end: 0.3em; } .step__num::after { border-left: 0; margin-inline-start: 0.3em; } .step__lead { font-weight: 700; letter-spacing: 0.05em; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .step__lead { font-size: 4.167vw; line-height: 1.375; } } @media screen and (min-width: 768px) { .step__lead { display: grid; place-items: center; font-size: 1.475vw; line-height: 1.5; min-height: 4em; text-align: center; } } @media screen and (min-width: 1220px) { .step__lead { font-size: 18px; } } .step__icon { z-index: 5; } @media screen and (max-width: 767px) { .step__icon { left: 6.771vw; margin-top: 3.906vw; position: absolute; top: 50%; transform: translateY(-50%); width: 13.021vw; } } @media screen and (min-width: 768px) { .step__icon { margin-inline: auto; position: relative; width: 8.197vw; } } @media screen and (min-width: 1220px) { .step__icon { width: 100px; } } .step__text { position: relative; z-index: 5; } @media screen and (max-width: 767px) { .step__text { font-size: 3.385vw; line-height: 1.615; margin-top: 1.953vw; width: 58.333vw; } } @media screen and (min-width: 768px) { .step__text { line-height: 1.75; margin-inline: auto; width: 10em; } } .step__item--01 { background: #fff3a9; } .step__item--01::after { background: #fff3a9; } .step__item--02, .step__item--04 { background: #fff3a9; } .step__item--02::before, .step__item--04::before { background: #fff; } @media screen and (max-width: 767px) { .step__item--02::before, .step__item--04::before { border-top-left-radius: 5.208vw; border-top-right-radius: 5.208vw; } } @media screen and (min-width: 768px) { .step__item--02::before, .step__item--04::before { border-bottom-left-radius: 3.279vw; border-top-left-radius: 3.279vw; } } @media screen and (min-width: 1220px) { .step__item--02::before, .step__item--04::before { border-bottom-left-radius: 40px; border-top-left-radius: 40px; } } .step__item--02::after, .step__item--04::after { background: #fff; } .step__item--03 { background: #fff; } .step__item--03::before { background: #fff3a9; } @media screen and (max-width: 767px) { .step__item--03::before { border-top-left-radius: 5.208vw; border-top-right-radius: 5.208vw; } } @media screen and (min-width: 768px) { .step__item--03::before { border-bottom-left-radius: 3.279vw; border-top-left-radius: 3.279vw; } } @media screen and (min-width: 1220px) { .step__item--03::before { border-bottom-left-radius: 40px; border-top-left-radius: 40px; } } .step__item--03::after { background: #fff3a9; } .step__item--05 { background: #fff; } .step__item--05::before { background: #fff3a9; } @media screen and (max-width: 767px) { .step__item--05::before { border-radius: 5.208vw; } } @media screen and (min-width: 768px) { .step__item--05::before { border-radius: 3.279vw; } } @media screen and (min-width: 1220px) { .step__item--05::before { border-radius: 40px; } } .breakdown__item { align-items: center; background: 0/contain no-repeat; display: flex; justify-content: center; transform: translateZ(0); } @media screen and (max-width: 767px) { .breakdown__item { filter: drop-shadow(1.719vw 3.437vw 3.437vw rgba(173, 41, 0, 0.3)); height: 24.74vw; padding-top: 9.766vw; width: 37.76vw; } } @media screen and (min-width: 768px) { .breakdown__item { filter: drop-shadow(0.984vw 1.967vw 1.967vw rgba(173, 41, 0, 0.3)); height: 13.279vw; padding-top: 4.508vw; position: relative; width: 21.475vw; } } @media screen and (min-width: 1220px) { .breakdown__item { filter: drop-shadow(23px 24px 24px rgba(173, 41, 0, 0.3)); height: 162px; padding-top: 55px; width: 262px; } } @media screen and (min-width: 768px) { .breakdown__item:not(:last-child)::after { background: url(../images/plan_cross.svg) 50%/contain no-repeat; content: ""; display: block; height: 2.213vw; position: absolute; right: -3.443vw; top: 6.557vw; width: 2.213vw; } } @media screen and (min-width: 1220px) { .breakdown__item:not(:last-child)::after { height: 27px; right: -42px; top: 80px; width: 27px; } } @media screen and (max-width: 767px) { .breakdown__item--01 { background-image: url(../images/breakdown_bg_sp_01.png); } } @media screen and (min-width: 768px) { .breakdown__item--01 { background-image: url(../images/breakdown_bg_pc_01.png); } } @media screen and (max-width: 767px) { .breakdown__item--02 { background-image: url(../images/breakdown_bg_sp_02.png); } } @media screen and (min-width: 768px) { .breakdown__item--02 { background-image: url(../images/breakdown_bg_pc_02.png); } } @media screen and (max-width: 767px) { .breakdown__item--03 { background-image: url(../images/breakdown_bg_sp_03.png); } } @media screen and (min-width: 768px) { .breakdown__item--03 { background-image: url(../images/breakdown_bg_pc_03.png); } } .breakdown__label { font-weight: 700; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .breakdown__label { font-size: 3.906vw; line-height: 1.32; } } @media screen and (min-width: 768px) { .breakdown__label { font-size: 1.967vw; line-height: 1.333; position: relative; } } @media screen and (min-width: 1220px) { .breakdown__label { font-size: 24px; } } .breakdown__text { color: #fff; letter-spacing: 0.05em; text-align: center; } @media screen and (max-width: 767px) { .breakdown__text { line-height: 1.607; margin-inline: auto; margin-top: 5.208vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .breakdown__text { font-size: 1.475vw; line-height: 2; margin-top: 2.869vw; } } @media screen and (min-width: 1220px) { .breakdown__text { font-size: 18px; margin-top: 35px; } } /* voice */ .voice { background-image: url(../images/voice_bg_01.jpg), url(../images/voice_bg_02.jpg); background-repeat: no-repeat; } @media screen and (max-width: 767px) { .voice { background-position: 100% 0, 0 100%; background-size: 130.208vw auto; padding: 11.068vw 0 13.021vw; } } @media screen and (min-width: 768px) { .voice { background-position: 0 0, 100% 100%; background-size: 81.967vw auto; padding: 6.148vw 0 10.656vw; } } @media screen and (min-width: 1220px) { .voice { background-size: inherit; padding: 75px 0 130px; } } .title--voice { color: #ffcc29; } @media screen and (max-width: 767px) { .hgroup__lead--voice { margin-top: 3.255vw; } } @media screen and (min-width: 768px) { .hgroup__lead--voice { margin-top: 2.049vw; } } @media screen and (min-width: 1220px) { .hgroup__lead--voice { margin-top: 25px; } } .voice__list { display: flex; flex-direction: column; margin-inline: auto; } @media screen and (max-width: 767px) { .voice__list { gap: 11.719vw; margin-top: 14.323vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .voice__list { gap: 6.557vw; margin-top: 7.787vw; width: 73.77vw; } } @media screen and (min-width: 1220px) { .voice__list { gap: 80px; margin-top: 95px; width: 900px; } } .comment { background: #fff2d3; } .comment__head { cursor: pointer; position: relative; } @media screen and (max-width: 767px) { .comment__head { padding-bottom: 3.906vw; padding-top: 5.208vw; } } @media screen and (min-width: 768px) { .comment__head { padding-bottom: 2.459vw; padding-top: 2.869vw; } } @media screen and (min-width: 1220px) { .comment__head { padding-bottom: 30px; padding-top: 35px; } } .comment__avatar { position: absolute; } @media screen and (max-width: 767px) { .comment__avatar { bottom: 1.302vw; width: 32.552vw; } } @media screen and (min-width: 768px) { .comment__avatar { bottom: -4.918vw; width: 20.492vw; } } @media screen and (min-width: 1220px) { .comment__avatar { bottom: -60px; width: 250px; } } .comment__name { background: #f6901d; color: #fff; font-weight: 700; letter-spacing: 0.05em; position: absolute; text-align: center; top: 0; transform: translateY(-50%); } @media screen and (max-width: 767px) { .comment__name { border-radius: 2.995vw; font-size: 3.346vw; line-height: 1.79; min-width: 32.031vw; padding: 0 3.646vw; } } @media screen and (min-width: 768px) { .comment__name { border-radius: 1.557vw; font-size: 1.721vw; line-height: 1.81; min-width: 16.885vw; padding: 0 2.295vw; } } @media screen and (min-width: 1220px) { .comment__name { border-radius: 19px; font-size: 21px; min-width: 206px; padding: 0 28px; } } .comment__name::after { background: #f6901d; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; left: 50%; position: absolute; transform: translateX(-50%); } @media screen and (max-width: 767px) { .comment__name::after { bottom: -1.563vw; height: 1.953vw; width: 1.693vw; } } @media screen and (min-width: 768px) { .comment__name::after { bottom: -0.82vw; height: 0.984vw; width: 0.82vw; } } @media screen and (min-width: 1220px) { .comment__name::after { bottom: -10px; height: 12px; width: 10px; } } .comment__lead { font-weight: 500; letter-spacing: 0.04em; } @media screen and (max-width: 767px) { .comment__lead { font-size: 4.167vw; line-height: 1.6; } } @media screen and (min-width: 768px) { .comment__lead { font-size: 2.131vw; line-height: 1.3; } } @media screen and (min-width: 1220px) { .comment__lead { font-size: 26px; } } .comment__catch { font-weight: 700; letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: #ffe43e; text-decoration-skip-ink: none; text-decoration-thickness: 0.5em; text-underline-offset: -0.25em; } @media screen and (max-width: 767px) { .comment__catch { font-size: 4.948vw; line-height: 1.316; } } @media screen and (min-width: 768px) { .comment__catch { font-size: 2.623vw; line-height: 1.3; } } @media screen and (min-width: 1220px) { .comment__catch { font-size: 32px; } } .comment__catch-large { color: var(--color-primary); } @media screen and (max-width: 767px) { .comment__catch-large { font-size: 7.031vw; } } @media screen and (min-width: 768px) { .comment__catch-large { font-size: 4.426vw; } } @media screen and (min-width: 1220px) { .comment__catch-large { font-size: 54px; } } .comment__toggle { background: var(--color-font); border-radius: 50%; position: absolute; } @media screen and (max-width: 767px) { .comment__toggle { height: 7.813vw; width: 7.813vw; } } @media screen and (min-width: 768px) { .comment__toggle { bottom: 3.689vw; height: 3.279vw; width: 3.279vw; } } @media screen and (min-width: 1220px) { .comment__toggle { bottom: 45px; height: 40px; width: 40px; } } .comment__toggle::before, .comment__toggle::after { background: #fff; content: ""; display: block; height: 2px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease-in-out; } @media screen and (max-width: 767px) { .comment__toggle::before, .comment__toggle::after { width: 3.906vw; } } @media screen and (min-width: 768px) { .comment__toggle::before, .comment__toggle::after { width: 1.639vw; } } @media screen and (min-width: 1220px) { .comment__toggle::before, .comment__toggle::after { width: 20px; } } .comment__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .comment__body { display: none; position: relative; } @media screen and (max-width: 767px) { .comment__body { padding: 1.302vw 5.208vw 3.906vw; } } @media screen and (min-width: 768px) { .comment__body { padding-bottom: 1.639vw; } } @media screen and (min-width: 1220px) { .comment__body { padding-bottom: 20px; } } .comment__text { background: #fff; text-align: justify; } @media screen and (max-width: 767px) { .comment__text { border-radius: 2.604vw; letter-spacing: 0.02em; line-height: 1.571; padding: 3.906vw 4.557vw; } } @media screen and (min-width: 768px) { .comment__text { border-radius: 1.639vw; letter-spacing: 0.04em; line-height: 1.875; padding: 1.967vw 2.459vw; width: 53.279vw; } } @media screen and (min-width: 1220px) { .comment__text { border-radius: 20px; padding: 24px 30px; width: 650px; } } .comment__notes { color: #747474; letter-spacing: 0.04em; text-align: right; } @media screen and (max-width: 767px) { .comment__notes { font-size: 2.344vw; margin-top: 1.953vw; } } @media screen and (min-width: 768px) { .comment__notes { font-size: 0.984vw; margin-top: 0.82vw; } } @media screen and (min-width: 1220px) { .comment__notes { font-size: 12px; margin-top: 10px; } } .comment__head.is_show .comment__toggle::after { transform: translate(-50%, -50%); } @media screen and (max-width: 767px) { .comment:nth-child(odd) .comment__head { padding-left: 32.552vw; } } @media screen and (min-width: 768px) { .comment:nth-child(odd) .comment__head { padding-left: 18.033vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(odd) .comment__head { padding-left: 220px; } } @media screen and (max-width: 767px) { .comment:nth-child(odd) .comment__avatar { left: -2.604vw; } } @media screen and (min-width: 768px) { .comment:nth-child(odd) .comment__avatar { left: -3.689vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(odd) .comment__avatar { left: -45px; } } @media screen and (min-width: 768px) { .comment:nth-child(odd) .comment__name { margin-inline-start: 0.656vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(odd) .comment__name { margin-inline-start: 8px; } } @media screen and (max-width: 767px) { .comment:nth-child(odd) .comment__toggle { right: 3.255vw; top: 5.859vw; } } @media screen and (min-width: 768px) { .comment:nth-child(odd) .comment__toggle { right: 5.328vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(odd) .comment__toggle { right: 65px; } } @media screen and (min-width: 768px) { .comment:nth-child(odd) .comment__text { margin-inline-end: 3.689vw; margin-inline-start: auto; } } @media screen and (min-width: 1220px) { .comment:nth-child(odd) .comment__text { margin-inline-end: 45px; } } @media screen and (min-width: 768px) { .comment:nth-child(odd) .comment__notes { margin-inline-end: 6.148vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(odd) .comment__notes { margin-inline-end: 75px; } } @media screen and (max-width: 767px) { .comment:nth-child(even) .comment__head { padding-left: 5.208vw; } } @media screen and (min-width: 768px) { .comment:nth-child(even) .comment__head { padding-left: 4.262vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(even) .comment__head { padding-left: 52px; } } @media screen and (max-width: 767px) { .comment:nth-child(even) .comment__avatar { right: -2.604vw; } } @media screen and (min-width: 768px) { .comment:nth-child(even) .comment__avatar { right: -3.689vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(even) .comment__avatar { right: -45px; } } @media screen and (max-width: 767px) { .comment:nth-child(even) .comment__name { margin-inline-start: 0.651vw; } } @media screen and (min-width: 768px) { .comment:nth-child(even) .comment__name { margin-inline-start: 0.82vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(even) .comment__name { margin-inline-start: 10px; } } @media screen and (max-width: 767px) { .comment:nth-child(even) .comment__toggle { bottom: 4.297vw; right: 31.901vw; } } @media screen and (min-width: 768px) { .comment:nth-child(even) .comment__toggle { right: 18.443vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(even) .comment__toggle { right: 225px; } } @media screen and (min-width: 768px) { .comment:nth-child(even) .comment__text { margin-inline-start: 3.689vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(even) .comment__text { margin-inline-start: 45px; } } @media screen and (min-width: 768px) { .comment:nth-child(even) .comment__notes { margin-inline-end: 19.262vw; } } @media screen and (min-width: 1220px) { .comment:nth-child(even) .comment__notes { margin-inline-end: 235px; } } /* qa */ .qa-wrap { background: #ffcc29; } @media screen and (max-width: 767px) { .qa-wrap { padding: 11.068vw 0 10.417vw; } } @media screen and (min-width: 768px) { .qa-wrap { padding: 6.148vw 0 7.787vw; } } @media screen and (min-width: 1220px) { .qa-wrap { padding: 75px 0 95px; } } @media screen and (max-width: 767px) { .qa { margin-top: 15.625vw; } } @media screen and (min-width: 768px) { .qa { margin-top: 4.918vw; } } @media screen and (min-width: 1220px) { .qa { margin-top: 60px; } } .title--qa { color: #fff; } .qa__list { display: flex; flex-direction: column; margin-inline: auto; } @media screen and (max-width: 767px) { .qa__list { gap: 3.255vw; margin-top: 5.208vw; width: 86.979vw; } } @media screen and (min-width: 768px) { .qa__list { gap: 2.049vw; margin-top: 3.279vw; width: 77.049vw; } } @media screen and (min-width: 1220px) { .qa__list { gap: 25px; margin-top: 40px; width: 940px; } } .qa-question { background: #f08800; cursor: pointer; position: relative; } @media screen and (max-width: 767px) { .qa-question { padding: 2.604vw 9.115vw 2.604vw 11.068vw; } } @media screen and (min-width: 768px) { .qa-question { padding: 1.311vw 4.098vw 1.311vw 6.967vw; } } @media screen and (min-width: 1220px) { .qa-question { padding: 16px 50px 16px 85px; } } .qa-question__icon { color: #ffbc22; font-weight: 600; letter-spacing: 0.06em; position: absolute; } @media screen and (max-width: 767px) { .qa-question__icon { font-size: 5.208vw; left: 3.125vw; top: 2.865vw; } } @media screen and (min-width: 768px) { .qa-question__icon { font-size: 2.951vw; left: 2.295vw; top: 1.311vw; } } @media screen and (min-width: 1220px) { .qa-question__icon { font-size: 36px; left: 28px; top: 16px; } } .qa-question__text { color: #fff; font-weight: 700; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .qa-question__text { font-size: 4.167vw; line-height: 1.313; } } @media screen and (min-width: 768px) { .qa-question__text { font-size: 1.803vw; line-height: 1.727; } } @media screen and (min-width: 1220px) { .qa-question__text { font-size: 22px; } } .qa__toggle { background: var(--color-font); border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 767px) { .qa__toggle { height: 6.51vw; right: 2.344vw; width: 6.51vw; } } @media screen and (min-width: 768px) { .qa__toggle { height: 2.869vw; right: 1.23vw; width: 2.869vw; } } @media screen and (min-width: 1220px) { .qa__toggle { height: 35px; right: 15px; width: 35px; } } .qa__toggle::before, .qa__toggle::after { background: #fff; content: ""; display: block; height: 2px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease-in-out; } @media screen and (max-width: 767px) { .qa__toggle::before, .qa__toggle::after { width: 3.125vw; } } @media screen and (min-width: 768px) { .qa__toggle::before, .qa__toggle::after { width: 1.393vw; } } @media screen and (min-width: 1220px) { .qa__toggle::before, .qa__toggle::after { width: 17px; } } .qa__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .qa-answer { background: #fff; display: none; position: relative; } @media screen and (max-width: 767px) { .qa-answer { padding: 3.255vw 3.906vw 3.906vw 11.068vw; } } @media screen and (min-width: 768px) { .qa-answer { padding: 2.049vw 2.459vw 2.459vw 6.967vw; } } @media screen and (min-width: 1220px) { .qa-answer { padding: 25px 30px 30px 85px; } } .qa-answer__icon { color: var(--color-primary); font-weight: 600; letter-spacing: 0.06em; position: absolute; } @media screen and (max-width: 767px) { .qa-answer__icon { font-size: 5.859vw; left: 3.125vw; top: 2.865vw; } } @media screen and (min-width: 768px) { .qa-answer__icon { font-size: 3.197vw; left: 2.295vw; top: 1.639vw; } } @media screen and (min-width: 1220px) { .qa-answer__icon { font-size: 39px; left: 28px; top: 20px; } } .qa-answer__text { letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .qa-answer__text { line-height: 1.5; } } @media screen and (min-width: 768px) { .qa-answer__text { font-size: 1.475vw; line-height: 1.778; } } @media screen and (min-width: 1220px) { .qa-answer__text { font-size: 18px; } } .qa-question.is_show .qa__toggle::after { transform: translate(-50%, -50%); } /* ======================================= contact ======================================= */ .contact .l-header-btn, .thanks .l-header-btn { border: 1px solid #EC6013; } .contact .sns__title, .thanks .sns__title { border: 1px solid #EC6013; } .contact .sns__body, .thanks .sns__body { background: #E8E8E8; } .contact .toggle__bar, .thanks .toggle__bar { background: #EC6013; } .contact .contact_box, .thanks .contact_box { display: flex; justify-content: space-between; margin: 0 auto; } @media screen and (max-width: 767px) { .contact .contact_box, .thanks .contact_box { display: block; width: 86.979vw; padding: 19.531vw 0 10.417vw; } } @media screen and (min-width: 768px) { .contact .contact_box, .thanks .contact_box { width: 90.164vw; padding: 13.115vw 0 5.738vw; } } @media screen and (min-width: 1220px) { .contact .contact_box, .thanks .contact_box { width: 1100px; padding: 160px 0 70px; } } @media screen and (max-width: 767px) { .contact .contact_box .box, .thanks .contact_box .box { width: auto; } } @media screen and (min-width: 768px) { .contact .contact_box .box, .thanks .contact_box .box { width: 43.443vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box, .thanks .contact_box .box { width: 530px; } } @media screen and (max-width: 767px) { .contact .contact_box .box .c_logo, .thanks .contact_box .box .c_logo { width: 45.964vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .c_logo, .thanks .contact_box .box .c_logo { width: 22.951vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .c_logo, .thanks .contact_box .box .c_logo { width: 280px; } } @media screen and (max-width: 767px) { .contact .contact_box .box .tit, .thanks .contact_box .box .tit { margin: 6.51vw 0 5.859vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .tit, .thanks .contact_box .box .tit { margin: 3.279vw 0; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .tit, .thanks .contact_box .box .tit { margin: 40px 0; } } .contact .contact_box .box .tit span, .thanks .contact_box .box .tit span { font-weight: 700; letter-spacing: 0.01em; } @media screen and (max-width: 767px) { .contact .contact_box .box .tit span, .thanks .contact_box .box .tit span { font-size: 6.25vw; border-bottom: 0.521vw solid #EC6013; margin-right: 3.125vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .tit span, .thanks .contact_box .box .tit span { font-size: 2.705vw; border-bottom: 0.246vw solid #EC6013; margin-right: 1.639vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .tit span, .thanks .contact_box .box .tit span { font-size: 33px; border-bottom: 3px solid #EC6013; margin-right: 20px; } } .contact .contact_box .box .tit strong, .thanks .contact_box .box .tit strong { display: inline-block; color: #EC6013; text-align: center; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .contact .contact_box .box .tit strong, .thanks .contact_box .box .tit strong { font-size: 3.125vw; line-height: 7.552vw; width: 16.667vw; border-radius: 1.042vw; border: 0.26vw solid #EC6013; } } @media screen and (min-width: 768px) { .contact .contact_box .box .tit strong, .thanks .contact_box .box .tit strong { font-size: 1.393vw; line-height: 3.279vw; width: 7.377vw; border-radius: 0.41vw; border: 0.164vw solid #EC6013; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .tit strong, .thanks .contact_box .box .tit strong { font-size: 17px; line-height: 40px; width: 90px; border-radius: 5px; border: 2px solid #EC6013; } } .contact .contact_box .box .text, .thanks .contact_box .box .text { color: #7D7268; line-height: 1.76; font-weight: 700; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .contact .contact_box .box .text, .thanks .contact_box .box .text { font-size: 3.646vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .text, .thanks .contact_box .box .text { font-size: 1.393vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .text, .thanks .contact_box .box .text { font-size: 17px; } } .contact .contact_box .box .list, .thanks .contact_box .box .list { display: flex; flex-wrap: wrap; } @media screen and (max-width: 767px) { .contact .contact_box .box .list, .thanks .contact_box .box .list { margin: 4.557vw 0 4.557vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .list, .thanks .contact_box .box .list { margin: 2.459vw 0 4.098vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .list, .thanks .contact_box .box .list { margin: 30px 0 50px; } } .contact .contact_box .box .list li, .thanks .contact_box .box .list li { font-weight: 700; letter-spacing: 0.05em; position: relative; } @media screen and (max-width: 767px) { .contact .contact_box .box .list li, .thanks .contact_box .box .list li { font-size: 3.906vw; padding-left: 3.646vw; margin-left: 5.208vw; margin-bottom: 2.604vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .list li, .thanks .contact_box .box .list li { font-size: 1.393vw; padding-left: 0.82vw; margin-left: 1.475vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .list li, .thanks .contact_box .box .list li { font-size: 17px; padding-left: 10px; margin-left: 18px; } } .contact .contact_box .box .list li:first-child, .thanks .contact_box .box .list li:first-child { margin-left: 0; } @media screen and (max-width: 767px) { .contact .contact_box .box .list li:last-child, .thanks .contact_box .box .list li:last-child { margin-left: 0; margin-bottom: 0; } } .contact .contact_box .box .list li::before, .thanks .contact_box .box .list li::before { content: ""; display: block; box-sizing: border-box; position: absolute; top: 50%; left: 0; } @media screen and (max-width: 767px) { .contact .contact_box .box .list li::before, .thanks .contact_box .box .list li::before { width: 1.302vw; height: 2.083vw; margin-top: -0.911vw; border: 1.302vw solid transparent; border-left: 2.083vw solid #F6901D; } } @media screen and (min-width: 768px) { .contact .contact_box .box .list li::before, .thanks .contact_box .box .list li::before { width: 0.492vw; height: 0.328vw; margin-top: -0.164vw; border: 0.246vw solid transparent; border-left: 0.492vw solid #F6901D; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .list li::before, .thanks .contact_box .box .list li::before { width: 6px; height: 4px; margin-top: -2px; border: 3px solid transparent; border-left: 6px solid #F6901D; } } @media screen and (max-width: 767px) { .contact .contact_box .box .img_area, .thanks .contact_box .box .img_area { display: flex; justify-content: space-between; margin-bottom: 6.51vw; } } @media screen and (max-width: 767px) { .contact .contact_box .box .img_area .img, .thanks .contact_box .box .img_area .img { width: 41.667vw; } } @media screen and (max-width: 767px) { .contact .contact_box .box .img_area .img:first-child, .thanks .contact_box .box .img_area .img:first-child { margin-bottom: 0; } } @media screen and (min-width: 768px) { .contact .contact_box .box .img_area .img:first-child, .thanks .contact_box .box .img_area .img:first-child { margin-bottom: 2.459vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .img_area .img:first-child, .thanks .contact_box .box .img_area .img:first-child { margin-bottom: 30px; } } .contact .contact_box .box .form_c, .thanks .contact_box .box .form_c { background: #F6F6F6; } .contact .contact_box .box .form_c .form__box, .thanks .contact_box .box .form_c .form__box { width: auto; margin: 0; background: none; } @media screen and (max-width: 767px) { .contact .contact_box .box .form_c .form__box, .thanks .contact_box .box .form_c .form__box { padding: 0.651vw 6.51vw 9.766vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .form_c .form__box, .thanks .contact_box .box .form_c .form__box { padding: 0.82vw 3.279vw 4.508vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .form_c .form__box, .thanks .contact_box .box .form_c .form__box { padding: 10px 40px 55px; } } .contact .contact_box .box .form_c .form__box .form__table th, .contact .contact_box .box .form_c .form__box .form__table td, .thanks .contact_box .box .form_c .form__box .form__table th, .thanks .contact_box .box .form_c .form__box .form__table td { display: block; } .contact .contact_box .box .form_c .form__box .form__table .form__table-head, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head { color: #171717; width: auto; position: relative; } @media screen and (max-width: 767px) { .contact .contact_box .box .form_c .form__box .form__table .form__table-head, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head { font-size: 3.125vw; padding: 5.208vw 0 1.302vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .form_c .form__box .form__table .form__table-head, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head { font-size: 1.393vw; padding: 2.459vw 0 0.574vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .form_c .form__box .form__table .form__table-head, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head { font-size: 17px; padding: 30px 0 7px; } } .contact .contact_box .box .form_c .form__box .form__table .form__table-head label, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head label { display: flex; align-items: center; position: relative; } .contact .contact_box .box .form_c .form__box .form__table .form__table-head label::after, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head label::after { content: "必須"; display: block; color: #fff; text-align: center; background: #EC6013; } @media screen and (max-width: 767px) { .contact .contact_box .box .form_c .form__box .form__table .form__table-head label::after, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head label::after { font-size: 2.344vw; line-height: 4.167vw; width: 7.031vw; margin-left: 1.953vw; border-radius: 0.781vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .form_c .form__box .form__table .form__table-head label::after, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head label::after { font-size: 1.148vw; line-height: 2.049vw; width: 3.443vw; margin-left: 0.656vw; border-radius: 0.41vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .form_c .form__box .form__table .form__table-head label::after, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head label::after { font-size: 14px; line-height: 25px; width: 42px; margin-left: 8px; border-radius: 5px; } } .contact .contact_box .box .form_c .form__box .form__table .form__table-head span, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head span { color: #7D7268; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .contact .contact_box .box .form_c .form__box .form__table .form__table-head span, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head span { display: block; font-size: 2.344vw; margin: 1.953vw 0 0; } } @media screen and (min-width: 768px) { .contact .contact_box .box .form_c .form__box .form__table .form__table-head span, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head span { font-size: 1.066vw; position: absolute; right: 0; bottom: 1.066vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .form_c .form__box .form__table .form__table-head span, .thanks .contact_box .box .form_c .form__box .form__table .form__table-head span { font-size: 13px; position: absolute; right: 0; bottom: 13px; } } @media screen and (max-width: 767px) { .contact .contact_box .box .form_c .form__box .form__table .form__input, .thanks .contact_box .box .form_c .form__box .form__table .form__input { font-size: 3.646vw; line-height: 10.938vw; padding: 0 3.906vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .form_c .form__box .form__table .form__input, .thanks .contact_box .box .form_c .form__box .form__table .form__input { font-size: 1.393vw; line-height: 4.098vw; padding: 0 1.475vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .form_c .form__box .form__table .form__input, .thanks .contact_box .box .form_c .form__box .form__table .form__input { font-size: 17px; line-height: 50px; padding: 0 18px; } } @media screen and (max-width: 767px) { .contact .contact_box .box .form_c .form__box .form__table .form__input--first-name, .contact .contact_box .box .form_c .form__box .form__table .form__input--last-name, .thanks .contact_box .box .form_c .form__box .form__table .form__input--first-name, .thanks .contact_box .box .form_c .form__box .form__table .form__input--last-name { width: 36.198vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .form_c .form__box .form__table .form__input--first-name, .contact .contact_box .box .form_c .form__box .form__table .form__input--last-name, .thanks .contact_box .box .form_c .form__box .form__table .form__input--first-name, .thanks .contact_box .box .form_c .form__box .form__table .form__input--last-name { width: 18.033vw; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .form_c .form__box .form__table .form__input--first-name, .contact .contact_box .box .form_c .form__box .form__table .form__input--last-name, .thanks .contact_box .box .form_c .form__box .form__table .form__input--first-name, .thanks .contact_box .box .form_c .form__box .form__table .form__input--last-name { width: 220px; } } .contact .contact_box .box .form_c .form__box .privacy, .thanks .contact_box .box .form_c .form__box .privacy { color: #7D7268; text-align: center; } @media screen and (max-width: 767px) { .contact .contact_box .box .form_c .form__box .privacy, .thanks .contact_box .box .form_c .form__box .privacy { font-size: 2.344vw; margin: 4.557vw 0 5.859vw; } } @media screen and (min-width: 768px) { .contact .contact_box .box .form_c .form__box .privacy, .thanks .contact_box .box .form_c .form__box .privacy { font-size: 1.066vw; margin: 2.459vw 0; } } @media screen and (min-width: 1220px) { .contact .contact_box .box .form_c .form__box .privacy, .thanks .contact_box .box .form_c .form__box .privacy { font-size: 13px; margin: 30px 0; } } .contact .contact_box .box .form_c .form__box .privacy a, .thanks .contact_box .box .form_c .form__box .privacy a { color: #7D7268; text-decoration: underline; } .contact .contact_box .box .form_c .form__box .privacy a:hover, .thanks .contact_box .box .form_c .form__box .privacy a:hover { text-decoration: none; } @media screen and (max-width: 767px) { .contact .thanks_box, .thanks .thanks_box { min-height: 100vh; } } @media screen and (min-width: 768px) { .contact .thanks_box, .thanks .thanks_box { min-height: calc(100vh - 24.59vw); } } @media screen and (min-width: 1220px) { .contact .thanks_box, .thanks .thanks_box { min-height: calc(100vh - 300px); } } @media screen and (max-width: 767px) { .contact .thanks_box .icon, .thanks .thanks_box .icon { width: 41.667vw; margin: 24.74vw auto 6.51vw; } } @media screen and (min-width: 768px) { .contact .thanks_box .icon, .thanks .thanks_box .icon { width: 16.393vw; margin: 19.672vw auto 3.689vw; } } @media screen and (min-width: 1220px) { .contact .thanks_box .icon, .thanks .thanks_box .icon { width: 200px; margin: 240px auto 45px; } } .contact .thanks_box .title, .thanks .thanks_box .title { line-height: 1.43; text-align: center; font-weight: 700; letter-spacing: 0.01em; } @media screen and (max-width: 767px) { .contact .thanks_box .title, .thanks .thanks_box .title { font-size: 7.813vw; margin-bottom: 7.161vw; } } @media screen and (min-width: 768px) { .contact .thanks_box .title, .thanks .thanks_box .title { font-size: 2.705vw; margin-bottom: 2.459vw; } } @media screen and (min-width: 1220px) { .contact .thanks_box .title, .thanks .thanks_box .title { font-size: 33px; margin-bottom: 30px; } } .contact .thanks_box .text, .thanks .thanks_box .text { line-height: 1.76; text-align: center; font-weight: 500; letter-spacing: 0.05em; } @media screen and (max-width: 767px) { .contact .thanks_box .text, .thanks .thanks_box .text { font-size: 3.646vw; } } @media screen and (min-width: 768px) { .contact .thanks_box .text, .thanks .thanks_box .text { font-size: 1.393vw; } } @media screen and (min-width: 1220px) { .contact .thanks_box .text, .thanks .thanks_box .text { font-size: 17px; } }/*# sourceMappingURL=style.css.map */