@charset "UTF-8"; /*** The new CSS reset - version 1.11.1 (last updated 24.10.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; 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; } /* original */ html { font-family: "Noto Sans JP", serif; font-weight: 400; margin-top: 0 !important; } .ff_mplus { font-family: "M PLUS 1p", serif; } .lp_rinji_wrap { position: relative; background-color: #fff; min-width: 100% !important; } .header { position: static; background-color: #0089D2; } .header__wrap { height: 60px; width: 1400px; max-width: 100%; margin: 0 auto; padding: 0 20px; display: flex; position: relative; } .lp_rinji_container { max-width: 1160px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .lp_rinji_cmn_head { text-align: center; font-size: 35px; font-weight: 900; line-height: 1.37; } .lp_rinji_cmn_phase { margin-top: 60px; text-align: center; line-height: 2; } @media screen and (max-width: 767px) { .lp_rinji_cmn_head { font-size: 24px; } .lp_rinji_cmn_phase { margin-top: 30px; text-align: left; } } .lp_rinji_desc { padding: 93px 0 90px; } .lp_rinji_desc_list { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 80px; } .lp_rinji_desc_list_child { width: 23.3%; background: rgba(4, 136, 210, .15); } .lp_rinji_desc_list_top { background: #0488D2; padding: 38px 0 36px; } .lp_rinji_desc_list_top h3 { text-align: center; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.575; } .lp_rinji_desc_list_top_img { display: flex; align-items: center; justify-content: center; height: 92px; margin-top: 35px; } .lp_rinji_desc_list_btm { padding: 29px 27px 65px; } .lp_rinji_desc_list_btm p { line-height: 1.75; } .lp_rinji_desc_before_child { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 80px; } .lp_rinji_desc_before_img, .lp_rinji_desc_before_txt { width: 47.8%; max-width: 535px; } .lp_rinji_desc_before_txt h3 { font-size: 22px; line-height: 1.54; font-weight: 600; } .lp_rinji_desc_before_phase { margin-top: 40px; line-height: 2.125; letter-spacing: 0.01em; } .lp_rinji_desc_before_phase .em { background: #0488D2; padding: 0 5px; letter-spacing: 0.15em; } .lp_rinji_desc_before_phase .em strong { color: #fff; font-weight: 700; } .lp_rinji_desc_tri { width: 0; height: 0; border-style: solid; border-right: 106px solid transparent; border-left: 106px solid transparent; border-top: 50px solid #0488d2; border-bottom: 0; margin: 65px auto 0; } .lp_rinji_desc_after { margin-top: 65px; background: rgba(4, 136, 210, .15); padding: 42px 10px; font-size: 25px; line-height: 1.5; text-align: center; color: #0488D2; } @media screen and (max-width: 991px) { .lp_rinji_desc_list { gap: 20px 0; } .lp_rinji_desc_list_child { width: 49%; } } @media screen and (max-width: 767px) { .lp_rinji_desc { padding: 30px 0 35px; } .lp_rinji_desc_list { gap: 30px 0; margin-top: 44px; } .lp_rinji_desc_list_child { width: 100%; } .lp_rinji_desc_list_btm { padding: 29px 27px 32px; } .lp_rinji_desc_before_child { gap: 24px 0; margin-top: 67px; } .lp_rinji_desc_before_img, .lp_rinji_desc_before_txt { max-width: none; width: 100%; } .lp_rinji_desc_before_img { order: 1; } .lp_rinji_desc_before_txt { order: 2; } .lp_rinji_desc_before_phase { margin-top: 26px; line-height: 1.75; } .lp_rinji_desc_tri { display: none; } .lp_rinji_desc_after { margin-top: 35px; padding: 30px 10px; font-size: 24px; text-align: left; } } .lp_rinji_flow { background: #D9ECF8; padding: 90px 0; } .lp_rinji_flow_head { background: #0488D2; border-radius: 10px; padding: 20px; font-size: 25px; font-weight: 900; text-align: center; color: #fff; } .lp_rinji_flow_phase { margin-top: 60px; text-align: center; } .lp_rinji_flow_list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 90px; } .lp_rinji_flow_list li { position: relative; } .lp_rinji_flow_list_no { position: absolute; top: -60px; z-index: 2; width: 100%; text-align: center; font-size: 70px; font-weight: 500; color: #0488D2; } .lp_rinji_flow_list_block { background-image: linear-gradient(to right, #fff 0% calc(100% - 25px), #D9ECF8 calc(100% - 25px) 100%); flex: 1; height: 273px; position: relative; text-align: center; padding-top: 50px; text-align: center; } .lp_rinji_flow_list_block::before { content: ""; display: block; position: absolute; width: 0; height: 0; border-style: solid; border-top: 136px solid transparent; border-bottom: 136px solid transparent; border-left: 25px solid #d9ecf8; border-right: 0; top: 0; bottom: 0; left: 0; } .lp_rinji_flow_list_block::after { content: ""; display: block; position: absolute; width: 0; height: 0; border-style: solid; border-top: 136px solid transparent; border-bottom: 136px solid transparent; border-left: 25px solid #fff; border-right: 0; top: 0; bottom: 0; right: 0; } .lp_rinji_flow_list_head { margin-top: 18px; font-size: 18px; font-weight: 700; text-align: center; } .lp_rinji_flow_list_txt { margin-top: 11px; } .lp_rinji_flow_note { margin-top: 33px; } @media screen and (max-width: 991px) { .lp_rinji_flow_list { grid-template-columns: repeat(2, 1fr); grid-gap: 60px 0; } } @media screen and (max-width: 767px) { .lp_rinji_flow { padding: 40px 0; } .lp_rinji_flow_phase { margin-top: 30px; text-align: left; } .lp_rinji_flow_list { grid-template-columns: repeat(1, 1fr); grid-gap: 60px 0; margin-top: 60px; } .lp_rinji_flow_list_block { background: #fff; height: auto; padding: 70px 0 20px; } .lp_rinji_flow_list_block::before { content: ""; display: block; position: absolute; top: 0; bottom: auto; left: 0; right: 0; width: 0; height: 0; border-style: solid; border-right: calc(50vw - 20px) solid transparent; border-left: calc(50vw - 20px) solid transparent; border-top: 25px solid #d9ecf8; border-bottom: 0; } .lp_rinji_flow_list_block::after { content: ""; display: block; position: absolute; top: auto; bottom: -25px; left: 0; right: 0; width: 0; height: 0; border-style: solid; border-right: calc(50vw - 20px) solid transparent; border-left: calc(50vw - 20px) solid transparent; border-top: 25px solid #fff; border-bottom: 0; } .lp_rinji_flow_list_no { top: -37px; } .lp_rinji_flow_note { margin-top: 50px; text-align: center; } } .lp_rinji_cta { background: #0089D2; padding: 90px 0; } .lp_rinji_cta_box { display: flex; justify-content: space-between; background: #fff; gap: 0 6.6%; border-radius: 15px; padding: 53px 82px 0 65px; } .lp_rinji_cta_img { display: flex; align-items: flex-end; width: 15.5%; min-width: 151px; } .lp_rinji_cta_txt { width: 77.9%; max-width: 758px; } .lp_rinji_cta_head { font-size: 35px; font-weight: 900; color: #0488D2; line-height: 1.37; } .lp_rinji_cta_area { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 20px; } .lp_rinji_cta_phase { font-size: 18px; } .lp_rinji_cta_btn { display: flex; align-items: center; justify-content: center; gap: 18px; border-radius: 33px; background: #FED302; padding: 22px 86px; min-width: 316px; } .lp_rinji_cta_area_img { display: none; } @media screen and (max-width: 1099px) { .lp_rinji_cta_txt { padding-bottom: 53px; } } @media screen and (max-width: 991px) { .lp_rinji_cta_img { display: none; } .lp_rinji_cta_txt { width: 100%; max-width: none; } .lp_rinji_cta_area { gap: 0; flex-direction: column; } .lp_rinji_cta_area_info { display: flex; align-items: center; gap: 10px; } .lp_rinji_cta_area_img { display: block; width: 91px; } .lp_rinji_cta_phase { line-height: 2; } } @media screen and (max-width: 767px) { .lp_rinji_cta { padding: 40px 0 53px; } .lp_rinji_cta_box { padding: 30px 25px; } .lp_rinji_cta_txt { padding-bottom: 0; } .lp_rinji_cta_head { font-size: 24px; } .lp_rinji_cta_phase { font-size: 16px; } .lp_rinji_cta_btn { padding: 22px; min-width: auto; max-width: 315px; width: 100%; } } .lp_rinji_newspaper { padding: 98px 0 90px; } .lp_rinji_newspaper_list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 63px auto 0; grid-gap: 35px 50px; max-width: 1000px; } .lp_rinji_newspaper_list li { border: solid 1px #707070; padding: 15px; text-align: center; font-size: 50px; font-weight: 700; } @media screen and (max-width: 1019px) { .lp_rinji_newspaper_list { grid-gap: 35px; } .lp_rinji_newspaper_list li { font-size: 40px; } } @media screen and (max-width: 991px) { .lp_rinji_newspaper_list { grid-gap: 25px; } .lp_rinji_newspaper_list li { font-size: 36px; } } @media screen and (max-width: 767px) { .lp_rinji_newspaper { padding: 49px 0 45px; } .lp_rinji_newspaper_list { grid-template-columns: repeat(2, 1fr); grid-gap: 20px; margin-top: 32px; } .lp_rinji_newspaper_list li { font-size: 24px; } } .lp_rinji_price { background: #D9ECF8; padding: 90px 0; } .lp_rinji_price_tbl { margin-top: 58px; } .lp_rinji_price_tbl table { width: 100%; } .lp_rinji_price_tbl th, .lp_rinji_price_tbl td { border: solid 1px #707070; padding: 13px; vertical-align: middle; } .lp_rinji_price_tbl th { background: #2D9BD9; font-weight: 700; color: #fff; text-align: center; } .lp_rinji_price_tbl td { text-align: right; } .lp_rinji_price_tbl td.tac { text-align: center; } .lp_rinji_price_tbl tr:nth-of-type(even) td { background: #F7F7F7; } .lp_rinji_price_tbl tr:nth-of-type(odd) td { background: #fff; } .lp_rinji_price_tbl th.fixed01 { background: #D9ECF8; border: none; } .lp_rinji_price_note { margin-top: 10px; font-size: 14px; text-align: right; } @media screen and (max-width: 991px) { .lp_rinji_price_tbl { overflow: auto; height: 400px; } .lp_rinji_price_tbl table { width: 1100px; } .lp_rinji_price_tbl th.fixed01, .lp_rinji_price_tbl th { position: sticky; top: 0; left: 0; z-index: 1; } .lp_rinji_price_tbl th.fixed01::before, .lp_rinji_price_tbl th::before { content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: solid 1px #707070; box-sizing: initial; } .lp_rinji_price_tbl th.fixed01::before { border-left: solid 1px #D9ECF8; } .lp_rinji_price_tbl th.fixed01 { z-index: 10; } } @media screen and (max-width: 767px) { .lp_rinji_price { padding: 45px 0; } .lp_rinji_price_tbl { margin-top: 30px; } } .lp_rinji_pattern { padding: 93px 0 90px; } .lp_rinji_pattern_block { margin-top: 63px; } .lp_rinji_pattern_child+.lp_rinji_pattern_child { margin-top: 80px; } .lp_rinji_pattern_head { padding: 18px; border: solid 1px #0488D2; font-size: 30px; font-weight: 900; text-align: center; color: #0488D2; } .lp_rinji_pattern_detail { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 60px; } .lp_rinji_pattern_info, .lp_rinji_pattern_desc { width: 47.8%; max-width: 535px; } .lp_rinji_pattern_box { background: #D9EBF8; } .lp_rinji_pattern_box+.lp_rinji_pattern_box { margin-top: 23px; } .lp_rinji_pattern_box_head { background: #0488D2; padding: 20px 24px; color: #fff; } .lp_rinji_pattern_box_head h4 { border-left: solid 4px #fff; padding-left: 19px; font-weight: 700; line-height: 1.5; } .lp_rinji_pattern_box_inner { padding: 30px 33px 37px; } .lp_rinji_pattern_box_img { text-align: center; } .lp_rinji_pattern_box_phase { margin-top: 25px; font-size: 14px; } .lp_rinji_pattern_desc { line-height: 2; } .lp_rinji_pattern_desc_list, .lp_rinji_pattern_note { margin-top: 70px; } .lp_rinji_pattern_note+.lp_rinji_pattern_desc_list { margin-top: 0; } .lp_rinji_pattern_desc_list li { padding-left: 1.3em; text-indent: -1.3em; } @media screen and (max-width: 767px) { .lp_rinji_pattern { padding: 45px 0; } .lp_rinji_pattern_block { margin-top: 40px; } .lp_rinji_pattern_child+.lp_rinji_pattern_child { margin-top: 40px; } .lp_rinji_pattern_head { padding: 15px; font-size: 24px; } .lp_rinji_pattern_detail { gap: 20px; margin-top: 30px; } .lp_rinji_pattern_info, .lp_rinji_pattern_desc { width: 100%; max-width: none; } .lp_rinji_pattern_box_inner { padding: 20px 20px 25px; } .lp_rinji_pattern_desc_list, .lp_rinji_pattern_note { margin-top: 35px; } } .dis_block_sp { display: none; } .dis_block_tablet { display: none; } @media screen and (max-width: 1119px) { .dis_none_content { display: none; } } @media screen and (max-width: 991px) { .dis_block_tablet { display: block; } } @media screen and (max-width: 767px) { .dis_none_sp { display: none; } .dis_block_sp { display: block; } }