@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) 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; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 62.5%; } body { font-family: Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif; } a { cursor: pointer; } a:hover { opacity: 0.7; } .pc_only { display: inline-block; } @media screen and (max-width: 768px) { .pc_only { display: none; } } .sp_only { display: none; } @media screen and (max-width: 768px) { .sp_only { display: inline-block; } } .cta { display: inline-block; } .cta_wrap { display: none; margin-top: 64px; text-align: center; width: 100%; } @media screen and (max-width: 768px) { .cta_wrap { display: inline-block; margin-top: 40px; } } .cta_wrap--fv { display: none; position: absolute; bottom: 64px; } @media screen and (min-width: 769px) and (max-width: 1440px) { .cta_wrap--fv { display: none; } } @media screen and (max-width: 768px) { .cta_wrap--fv { position: static; display: inline-block; margin-top: 32px; width: 100%; text-align: center; } } .cta a { display: inline-block; position: relative; border-radius: 30px; background: linear-gradient(90deg, #CC2128 7.1%, #E14704 110.21%); box-shadow: 0px 4px 14px 0px rgba(0, 5, 131, 0.24); color: #fff; font-size: 2rem; letter-spacing: 1.4px; padding: 16px 60px; } @media screen and (min-width: 769px) and (max-width: 1080px) { .cta a { font-size: 1.4rem; padding: 12px 48px; } } @media screen and (max-width: 768px) { .cta a { font-size: 1.4rem; padding: 12px 48px; } } .cta a::before { content: ""; position: absolute; top: 12px; left: 16px; display: inline-block; width: 36px; height: 36px; background: url(../img/lp002/content/icon/cta.png) no-repeat; background-size: contain; } @media screen and (min-width: 769px) and (max-width: 1080px) { .cta a::before { top: 6px; left: 12px; width: 32px; height: 32px; } } @media screen and (max-width: 768px) { .cta a::before { top: 6px; left: 12px; width: 32px; height: 32px; } } .cta a::after { content: ""; position: absolute; top: 24px; right: 24px; display: inline-block; width: 26px; height: 10px; background: url(../img/lp002/content/icon/arrow.png) no-repeat; background-size: contain; } @media screen and (min-width: 769px) and (max-width: 1080px) { .cta a::after { top: 18px; right: 17px; display: inline-block; width: 22px; height: 8px; } } @media screen and (max-width: 768px) { .cta a::after { top: 18px; right: 17px; display: inline-block; width: 22px; height: 8px; } } .header { width: calc(100% - 360px); border-top: solid 10px #cc2128; box-shadow: 0px 4px 6px 0px rgba(0, 5, 131, 0.24); } @media screen and (max-width: 768px) { .header { width: 100%; } } .header_inner { width: 100%; padding: 24px; max-width: 1080px; margin: 0 auto; } @media screen and (max-width: 768px) { .header_inner { padding: 12px; } } .header_inner a { display: flex; gap: 24px; align-items: center; font-size: 1.6rem; color: #3e3e3e; max-width: 380px; } @media screen and (max-width: 768px) { .header_inner a { font-size: 1.2rem; max-width: 300px; } } .header_inner img { width: auto; height: 40px; } .right_nav__application { display: none; position: fixed; right: -5px; top: 194px; transition: all 200ms; z-index: 2; } @media screen and (max-width: 768px) { .right_nav__application { display: inline-block; } } .right_nav__application a { display: flex; align-items: center; justify-content: center; background-color: #cc2128; color: #fff; font-size: 18px; font-size: 1.8rem; writing-mode: vertical-rl; letter-spacing: 3px; text-align: center; width: 61px; height: auto; padding: 15px 0; border-radius: 10px 0 0 10px; transition: all 200ms; } .right_nav__application a span.top_horizontal{ transform: rotate(-90deg); letter-spacing: 0em; } main { width: calc(100% - 360px); background: linear-gradient(172deg, #FFF 17.77%, #F2F4FB 99.21%); } @media screen and (max-width: 768px) { main { width: 100%; } } .fv { background: linear-gradient(100deg, #F1F6FD 41.7%, #E4E6F2 98.58%); } .fv_content { position: relative; display: flex; width: 100%; max-width: 1080px; margin: 0 auto; } .fv_left { color: #3e3e3e; } .content { padding: 120px 0; } @media screen and (max-width: 768px) { .content { padding: 56px 0; } } .content--bg { background: linear-gradient(105deg, rgba(244, 245, 251, 0.8), rgba(229, 233, 243, 0.8)); } .content_inner { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 32px; } @media screen and (max-width: 768px) { .content_inner { padding: 0 24px; } } .content_point { display: flex; align-items: center; gap: 16px; } .content_pointImg { width: auto; height: 172px; } @media screen and (max-width: 768px) { .content_pointImg { width: 64px; min-width: 64px; height: auto; } } .content_pointImg img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .content_pointTextWrap { margin: 36px 0 0 24px; } .content_pointTitle { font-size: 2.8rem; font-weight: 700; line-height: 1.3; color: #3e3e3e; } @media screen and (max-width: 768px) { .content_pointTitle { font-size: 1.8rem; } } .content_pointText { font-size: 1.4rem; line-height: 1.6; margin-top: 8px; color: rgba(62, 62, 62, 0.8); } @media screen and (max-width: 768px) { .content_pointText { font-size: 1.2rem; } } .content_caseTitle { position: relative; margin: 96px 0 0 32px; font-size: 2.4rem; font-weight: 700; color: #CC2128; } @media screen and (max-width: 768px) { .content_caseTitle { margin: 32px 0 0 24px; font-size: 1.6rem; } } .content_caseTitle::before { content: ""; position: absolute; top: 6px; left: -32px; width: 24px; height: 24px; background: url(../img/lp002/content/icon/check.png) no-repeat; background-size: contain; } @media screen and (max-width: 768px) { .content_caseTitle::before { top: 2px; left: -26px; width: 20px; height: 20px; } } .content_caseText { margin-top: 16px; color: #3e3e3e; font-size: 1.4rem; line-height: 1.6; } .content_caseList { display: flex; gap: 24px; margin-top: 32px; } @media screen and (min-width: 769px) and (max-width: 1440px) { .content_caseList { flex-flow: wrap; } } @media screen and (max-width: 768px) { .content_caseList { flex-flow: wrap; } } .content_caseItem { width: calc(25% - 18px); padding: 16px; box-sizing: border-box; border-radius: 8px; background: #FFF; box-shadow: 0px 0px 12px 0px rgba(53, 44, 153, 0.14); } @media screen and (min-width: 769px) and (max-width: 1440px) { .content_caseItem { width: calc(50% - 18px); } } @media screen and (max-width: 768px) { .content_caseItem { width: 100%; } } .content_caseItem img { width: 100%; height: auto; } .content_caseItemTitle { margin-top: 12px; font-size: 1.4rem; font-weight: 700; color: #3e3e3e; } .content_caseSalary { position: relative; margin: 8px 0 0 32px; color: rgba(62, 62, 62, 0.4); font-size: 1.2rem; display: flex; align-items: center; gap: 4px; flex-wrap: wrap } .content_caseSalary::before { content: ""; position: absolute; top: 4px; left: -28px; width: 24px; height: 24px; background: url(../img/lp002/content/point/yen.png) no-repeat; background-size: contain; } .content_caseSalary span { font-size: 2.8rem; font-weight: 700; color: #CC2128; } .content_casePlace { position: relative; margin: 8px 0 0 24px; color: rgba(62, 62, 62, 0.8); font-size: 1.2rem; } .content_casePlace::before { content: ""; position: absolute; top: 0; left: -20px; width: 18px; height: 18px; background: url(../img/lp002/content/point/map.png) no-repeat; background-size: contain; } .content_caseSkill { position: relative; margin: 8px 0 0 24px; color: rgba(62, 62, 62, 0.8); font-size: 1.2rem; } .content_caseSkill::before { content: ""; position: absolute; top: 0; left: -20px; width: 18px; height: 18px; background: url(../img/lp002/content/point/code.png) no-repeat; background-size: contain; } .content_imageList { display: flex; gap: 24px; margin-top: 96px; } @media screen and (max-width: 768px) { .content_imageList { margin-top: 32px; flex-flow: column; } } .content_imageItem { width: 33%; filter: drop-shadow(0px 0px 12px rgba(53, 44, 153, 0.14)); } @media screen and (max-width: 768px) { .content_imageItem { width: 80%; margin: 0 auto; } } .content_imageItem img { width: 100%; height: auto; border-radius: 8px; } .content_serviceImg { width: 100%; margin-top: 96px; } @media screen and (max-width: 768px) { .content_serviceImg { margin-top: 54px; } } .content_serviceImg img { width: 100%; height: auto; } .right_form { position: fixed; top: 0; right: 0; width: 360px; height: 100vh; background: #FFF; box-shadow: -4px 0px 4px 0px rgba(53, 44, 153, 0.12); padding: 40px 24px 0; box-sizing: border-box; overflow-y: scroll; } .right_form::-webkit-scrollbar { display: none; } .right_form dt { width: 100%; color: #3E3E3E; font-size: 1.2rem; margin-top: 24px; } .right_form dd input { width: 100%; border-radius: 4px; border: 1px solid rgba(204, 33, 40, 0.4); padding: 12px; font-size: 1.2rem; } .right_form dd input::-moz-placeholder { color: rgba(62, 62, 62, 0.4); } .right_form dd input::placeholder { color: rgba(62, 62, 62, 0.4); } .right_form ul { display: flex; gap: 16px; } .right_form li input { width: 100%; border-radius: 4px; border: 1px solid rgba(204, 33, 40, 0.4); padding: 12px; font-size: 1.2rem; } .right_form li input::-moz-placeholder { color: rgba(62, 62, 62, 0.4); } .right_form li input::placeholder { color: rgba(62, 62, 62, 0.4); } .right_form select { border-radius: 4px; border: 1px solid rgba(204, 33, 40, 0.4); padding: 12px; font-size: 1.2rem; width: 100%; } .right_form select::-moz-placeholder { color: rgba(62, 62, 62, 0.4); } .right_form select::placeholder { color: rgba(62, 62, 62, 0.4); } .right_formTitle { color: #CC2128; font-size: 2.4rem; font-weight: bold; text-align: center; } .right_formBirth li { width: 33.3%; } .right_formText { color: rgba(62, 62, 62, 0.6); font-size: 1rem; margin-top: 12px; } .right_formButtonWrap { display: flex; justify-content: center; margin-top: 24px; } .right_formButtonWrap input { border-radius: 2px; border: 1px solid rgba(204, 33, 40, 0.4); background: #FFF; width: 18px; height: 18px; } .right_formButtonWrap input:checked + label::before { content: ""; position: absolute; top: 0; left: -18px; width: 18px; height: 18px; background: #CC2128; border-radius: 4px; } .right_formButtonWrap input:checked + label::after { content: ""; position: absolute; top: 5px; left: -14px; width: 10px; height: 5px; border-left: 2px solid #FFF; border-bottom: 2px solid #FFF; transform: rotate(-45deg); } .right_formButtonWrap label { position: relative; color: #24190C; font-size: 1.2rem; } .right_formButtonWrap a { color: #CC2128; font-size: 1.2rem; font-weight: bold; } .right_formButton { position: relative; width: 270px; margin: 28px auto; } .right_formButton input { display: inline-block; width: 100%; border-radius: 30px; background: linear-gradient(90deg, #CC2128 7.1%, #E14704 110.21%); box-shadow: 0px 4px 14px 0px rgba(0, 5, 131, 0.24); color: #fff; font-size: 1.8rem; letter-spacing: 1.4px; padding: 12px 0px; text-align: center; cursor: pointer; } .right_formButton::before { content: ""; position: absolute; top: 8px; left: 16px; display: inline-block; width: 36px; height: 36px; background: url(../img/lp002/content/icon/cta.png) no-repeat; background-size: contain; } .right_formButton::after { content: ""; position: absolute; top: 18px; right: 24px; display: inline-block; width: 26px; height: 10px; background: url(../img/lp002/content/icon/arrow.png) no-repeat; background-size: contain; } .error_text { color: #e83e3e; } .footer { background-color: #000; position: relative; width: calc(100% - 360px); } @media screen and (max-width: 768px) { .footer { width: 100%; } } .footer_inner { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; max-width: 1080px; margin: auto; padding: 32px; } .footer_inner ul { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: wrap; padding: 10px; } @media screen and (max-width: 768px) { .footer_inner ul { padding: 0px 10px; } } .footer_inner ul li a { color: #fff; padding: 10px; } @media screen and (max-width: 768px) { .footer_inner ul li a { padding: 0px 10px; } } .footer_inner small { text-align: center; font-size: 12px; font-size: 1.2rem; color: #fff; } @media screen and (max-width: 768px) { .footer_inner small { margin-top: 10px; } } /*# sourceMappingURL=style.css.map */