@charset "UTF-8"; @keyframes decoMove { 0% { transform: translateX(100vw); } 90% { transform: translateX(-100%); } 100% { transform: translateX(-100%); } } img { max-width: 100%; height: auto; vertical-align: bottom; } html { font-size: 10px; } body { font-size: 1.6rem; line-height: 1.5; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #222222; } @media screen and (min-width: 993px) { a:hover { opacity: 0.8; } } .u-sp { display: none !important; } @media screen and (max-width: 992px) { .u-sp { display: block !important; } } @media screen and (max-width: 992px) { .u-pc { display: none !important; } } .u-over { transition: opacity 0.3s; } @media screen and (min-width: 768px) { .u-over:hover { opacity: 0.7; } } .u-fade { opacity: 0; transform: translateY(50px); transition: all 1s; } .u-fade.is-fade { opacity: 1; transform: translateY(0); } .u-fadeNext { opacity: 0; transform: translateY(50px); transition: all 1s; } .u-fadeNext.is-fadeNext { opacity: 1; transform: translateY(0); } .u-imgCover { display: block; height: 0; padding-top: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } /*** 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; } .l-container { max-width: 944px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .l-container.-md { max-width: 756px; } @media screen and (max-width: 992px) { .l-container.-md { max-width: 520px; } } .l-container.-lg { max-width: 1126px; } @media screen and (max-width: 992px) { .l-container.-lg { max-width: 520px; } } @media screen and (max-width: 992px) { .l-container { max-width: 520px; } } .l-main { overflow: hidden; background: #bee5fa; background: linear-gradient(180deg, rgb(190, 229, 250) 0%, rgb(220, 243, 253) 88%); } .l-main__inner { padding-bottom: 340px; background-image: url(../img/home/bottom-img.webp), url(../img/home/deco.png); background-position: center bottom, center 185px; background-size: 100% auto, 1500px auto; background-repeat: no-repeat, no-repeat; } @media screen and (max-width: 576px) { .l-main__inner { padding-bottom: 200px; background-image: url(../img/home/bottom-img-sp.webp), url(../img/home/deco-sp.png); background-size: 428px auto, 100% auto; } } /* ===================== color(new) ===================== */ :root { --ncb-orange: #F07800; --ncb-blue: #415AAA; --ncb-black: #1A1A1A; --ncb-yellow: #FBBD53; --ncb-green: #B3D234; --ncb-brown: #645A59; --ncb-pink: #F499C2; --ncb-Lt-blue: #7FCDF4; --ncb-red: #fa305f; --lt-blue-gray: #EDF2F4; --blue-gray: #D6DBDE; --lt-beige: #F5F2ED; --beige: #DBD1C1; --white: #FFFFFF; --lt-gray: #F2F2F2; --gray: #DDDDDD; --lt-orange: #FFEFD3; --lt-red: #FFEDED; } /****************************************** Layout *******************************************/ /* ===================== l-footer ===================== */ .l-footer { overflow: hidden; background: #FFF; } .l-footer span, .l-footer a { box-sizing: border-box; } @media screen and (max-width: 767.9px) { .l-footer { border-top: 2px solid #DDD; } } /* ===================== l-fnav ===================== */ .l-fnav { margin: 0 auto; background: var(--lt-blue-gray); } .l-fnav__top { display: flex; justify-content: space-between; margin-bottom: 53px; background: #FFF; } .l-fnav__bottom { padding-bottom: 28px; } .l-fnav__tab { width: 100%; display: flex; justify-content: flex-start; } .l-fnav__tab-item { /* width: 280px; */ width: 25%; cursor: pointer; font-size: 1.6rem; font-weight: 500; text-align: center; background: var(--ncb-brown); border-right: 1px solid #342F2E; color: #FFF; padding: 12px 0; transition: 0.3s; } .l-fnav__tab-item:not(:last-of-type) { border-right: 1px solid #342F2E; } .l-fnav__tab-item span { color: #FFF; } .l-fnav__tab-item.is-active { background: var(--lt-blue-gray); border-right: 1px solid #FFF; } .l-fnav__tab-item.is-active span { color: var(--ncb-orange); } .l-fnav__feature { display: flex; align-items: center; } .l-fnav__feature-item { border-left: 1px solid #CCC; } .l-fnav__feature-item .l-fnav__feature-link { color: var(--ncb-black); font-size: 1.8rem; padding: 0 19px; } .l-fnav__feature-search { padding: 0 19px; border: none; background: none; } .l-fnav__item { display: none; width: 77%; margin: 0 auto; } .l-fnav__item.is-active { display: block; } .l-fnav__item-inner { display: flex; justify-content: flex-start; margin-bottom: 20px; } .l-fnav__item-col { width: 17%; } .l-fnav__item-col.-single { width: 100%; } .l-fnav__item-col:not(:last-of-type) { margin-right: 62px; } .l-fnav__item-col.-indent { margin-top: calc(1.7rem + 35px); } .l-fnav__item-title--sp { display: none; } .l-fnav__item .l-fnav__link-main { display: inline-block; color: var(--ncb-black); font-size: 1.7rem; font-weight: 500; text-decoration: none; margin-bottom: 28px; position: relative; } .l-fnav__item a.l-fnav__link-main { padding-right: 28px; } .l-fnav__item .l-fnav__link-main:before, .l-fnav__item .l-fnav__link-main:after { display: inline-block; content: ""; position: absolute; } .l-fnav__item a.l-fnav__link-main:hover { text-decoration: underline; } .l-fnav__item a.l-fnav__link-main:before { width: 22px; height: 22px; background: url(../img/ft/icon_fnav_link.svg) center/contain no-repeat; right: 0; top: 2px; } .l-fnav__item .l-fnav__link-main:after { width: 20px; height: 2px; background: url(../img/ft/icon_border_footer.svg) center/contain no-repeat; left: 0; bottom: -7px; } .l-fnav__item .l-fnav__link-main.c-link--blank { padding-left: 0; } .l-fnav__item .l-fnav__link-main.c-link--blank:after { top: auto; right: auto; } .l-fnav__link-list { text-align: left; } .l-fnav__link-list + .l-fnav__link-main { margin-top: 3rem; } .l-fnav__link-item { padding: 3px 0; } .l-fnav__link-item:first-child { padding: 0; } .l-fnav__link-list .l-fnav__link-text { color: var(--ncb-black); font-size: 1.3rem; text-decoration: none; padding-left: 0; padding-right: 0; line-height: 1.6rem; } .l-fnav__link-text.c-link--blank::after { top: auto; right: -20px; bottom: 1px; position: absolute; } .l-fnav__link-text.c-link--pdf::after { width: 28px; height: 14px; background-size: contain; top: auto; right: -32px; bottom: 1px; position: absolute; } .c-list--note .c-list__item .c-link--blank::after { width: 14px; height: 14px; } .c-list--note .c-list__item .c-link--pdf::after { width: 28px; height: 14px; } .c-list--note .c-list__item .c-link--doc::after { width: 14px; height: 14px; } .c-list--note .c-list__item .c-link--modal::after { width: 14px; height: 14px; } @media screen and (min-width: 768px) { .l-fnav__tab-item:hover { background: #7F7878; transition: 0.3s; } .l-fnav__tab-item.is-active:hover { background: var(--lt-blue-gray); opacity: 0.8; } .l-fnav__link-list .l-fnav__link-text:hover { text-decoration: underline; } } @media screen and (max-width: 767.9px) { .l-fnav__bottom { padding-bottom: 0; } .l-fnav__item { width: 100%; } .l-fnav__item-inner { flex-direction: column; margin-bottom: 0; } .l-fnav__item-col { width: 100%; border-top: 1px solid #DDD; } .l-fnav__item-col:not(:last-of-type) { margin-right: 0; } .l-fnav__item-col.-indent { margin-top: 0; border-top: 0; } .l-fnav__item-title--sp { display: block; font-size: 1.4rem; font-weight: 500; padding: 15px 20px 15px 22px; background: #FFF; border-bottom: 1px solid #DDD; position: relative; } .l-fnav__item-title--sp:after { display: inline-block; content: ""; width: 21px; height: 18px; background: url(../img/ft/icon_gnav.svg) center/contain no-repeat; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; } .l-fnav__link-main.has-children + .l-fnav__link-list { display: none; margin: 5px 24px 30px calc(22px + 3rem); } .l-fnav__item-col.has-children .l-fnav__link-list { display: none; margin: 0 12px 30px calc(22px + 3rem); } .l-fnav__item-container { display: none; } .l-fnav__link-list + .l-fnav__link-main { margin-top: 0; } .l-fnav__link-item { line-height: 1.25; margin-bottom: 2.5rem; } .l-fnav__link-item:first-of-type { margin-top: 20px; } .l-fnav__item-col.has-children .l-fnav__link-item:first-of-type { margin-top: 0; } .l-fnav__link-item:last-of-type { margin-bottom: 0; } .l-fnav__link-list .l-fnav__link-text { /* display: inline-block; */ /* align-items: center; */ } .l-fnav__item .l-fnav__link-main { display: block; font-size: 1.4rem; /* font-weight: 400; */ padding: 10px 40px 10px calc(22px + 1rem); margin-bottom: 0; } .l-fnav__item .l-fnav__link-main.c-link--blank { margin-right: 0; } .l-fnav__item .l-fnav__link-main.has-children.is-active { border-bottom: 1px solid #DDD; } .l-fnav__item a.l-fnav__link-main:before { display: none; } .l-fnav__item .l-fnav__link-main:after { width: 25px; height: 25px; background: url(../img/ft/icon_link_arrow-orange.svg) center/contain no-repeat; left: auto; right: 20px; top: 0; bottom: 0; margin: auto; } .l-fnav__item .l-fnav__link-main.c-link--blank:after { top: 0; right: 20px; } .l-fnav__item .l-fnav__link-main:not(:first-child) { border-top: 1px solid #DDD; } .l-fnav__item .l-fnav__link-main.has-children:before, .l-fnav__item .l-fnav__link-main.has-children:after { display: inline-block; content: ""; width: 14px; height: 2px; background: var(--ncb-orange); border-radius: 2px; position: absolute; right: 26px; top: 0; bottom: 0; margin: auto; transition: 0.3s; } .l-fnav__item .l-fnav__link-main.has-children:after { transform: rotate(90deg); } .l-fnav__item-col .l-fnav__link-main.has-children.is-active:after { transform: rotate(180deg); } .l-fnav__link-main.has-children + .l-fnav__link-list .l-fnav__link-text:after, .l-fnav__item-col.has-children .l-fnav__link-list .l-fnav__link-text:after { display: inline-block; content: ""; width: 7px; height: 12px; background: url(../img/ft/icon_arrow_right.svg) center/contain no-repeat; margin-left: 1rem; position: absolute; bottom: 1px; } .l-fnav__link-main.has-children + .l-fnav__link-list .l-fnav__link-text.c-link--blank:after, .l-fnav__item-col.has-children .l-fnav__link-list .l-fnav__link-text.c-link--blank:after { width: 16px; height: 16px; background: url(../img/ft/icon_link_blank.svg) center/contain no-repeat; bottom: -1px; } .l-fnav__link-main.has-children + .l-fnav__link-list .l-fnav__link-text.c-link--pdf:after, .l-fnav__item-col.has-children .l-fnav__link-list .l-fnav__link-text.c-link--pdf:after { width: 24px; height: 12px; background: url(../img/ft/icon_link_pdf.svg) center/contain no-repeat; bottom: 1px; } } /* ===================== l-copyright ===================== */ .l-copyright { display: flex; justify-content: space-between; padding-bottom: 76px; position: relative; } .l-copyright:before, .l-copyright:after { display: inline-block; content: ""; position: absolute; bottom: 0; } .l-copyright:before { width: 66px; height: 57px; background: url(../img/ft/bg-onek01.svg) center/contain no-repeat; left: 0; } .l-copyright:after { width: 132px; height: 52px; background: url(../img/ft/bg-onek02.svg) center/contain no-repeat; right: 0; } .l-copyright__wrap { max-width: 1100px; padding: 0 3.125%; margin: 37px auto 0; } .l-copyright__img { display: flex; align-items: center; } .l-copyright__logo { width: 227px; margin-right: 24px; } .l-copyright__sns { display: flex; } .l-copyright__sns-item { display: flex; justify-content: center; align-items: center; } .l-copyright__sns-item:nth-of-type(3) { flex-basis: 32px; } .l-copyright__sns-item:not(:last-of-type) { margin-right: 15px; } .l-copyright__sns-item img { width: 100%; } .l-copyright__text { font-size: 1.2rem; text-align: right; } .l-copyright__text span { display: block; } .l-copyright__text-bottom { margin-top: 15px; margin-bottom: 12px; } @media screen and (max-width: 767.9px) { .l-copyright { flex-direction: column; padding-bottom: 63px; } .l-copyright:before { width: 50px; height: 43px; left: 27px; } .l-copyright:after { width: 100px; height: 40px; right: 27px; } .l-copyright__wrap { width: 100%; } .l-copyright__img { flex-direction: column; } .l-copyright__logo { width: 190px; margin-right: 0; margin-bottom: 22px; } .l-copyright__sns { margin-bottom: 24px; } .l-copyright__sns-item { width: 32px; height: 32px; } .l-copyright__text { font-size: 1rem; text-align: center; line-height: 1.5; } .l-copyright__text span { margin-top: 6px; } } /* ===================== l-pagetop ===================== */ .l-pagetop { display: none; width: 62px; position: fixed; right: 20px; bottom: 20px; transition: 0.3s; z-index: 3; } .l-pagetop img { width: 100%; vertical-align: bottom; } @media screen and (min-width: 768px) { .l-pagetop:hover { opacity: 0.8; transition: 0.3s; } } @media screen and (max-width: 767.9px) { .l-pagetop { width: 40px; } } /* ===================== 伝票選択のためのモーダル ===================== */ .c-modalw__btn { cursor: pointer; } .c-modalw { height: 100%; width: 100%; position: fixed; background-color: rgba(0, 0, 0, 0); top: 0; left: 0; z-index: 6000; visibility: hidden; transition: background-color 0.3s; } .c-modalw > div { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .c-modalw > div > div { display: block; background-color: #FF6600; width: 900px; height: auto; padding: 35px 15px; } .c-modalw.on { visibility: visible; background-color: rgba(0, 0, 0, 0.8); } .c-modalw ul.list_btn_denpyou { /*position: absolute;*/ justify-content: space-around; display: flex; } .c-modalw ul.list_btn_denpyou > a { background-color: rgb(255, 255, 255); margin: 10px; opacity: 1; padding: 5px; border: 1px solid #CCC; border-radius: 6px; flex-basis: 48%; text-align: center; text-decoration: none; background: linear-gradient(to bottom, #ffffff 0%, #dedede 100%); color: #333; font-weight: bold; padding: 10px 0; transition: opacity 0.2s; } .c-modalw ul.list_btn_denpyou > a:hover { opacity: 0.8; } .c-modalw ul.list_btn_denpyou > a:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 10px; background: url(/img/index/icon-side-service_menu.png) no-repeat; background-size: 6px 12px; width: 6px; height: 12px; margin: auto; } .c-modalw .text_modal1 { font-size: 2rem; } .c-modalw .text_modal2, .c-modalw .text_modal3 { font-size: 1.6rem; padding: 10px; } @media (max-width: 736px) { .c-modalw > div { width: 100%; display: flex; margin: 0 auto; } .c-modalw > div > div { width: 94%; padding: 35px 5px; } .c-modalw .text_modal1 { font-size: 1.6rem; } .c-modalw .text_modal2, .c-modalw .text_modal3 { font-size: 1.4rem; padding: 10px 5px 10px 0; } .c-modalw ul.list_btn_denpyou { display: block; position: relative; } .c-modalw ul.list_btn_denpyou > a { display: block; margin: 10px 0; } } /* ===================== l-container ===================== */ .l-column-single { max-width: 1100px; margin: 50px auto 0; } .l-container { width: 1100px; max-width: 100%; padding: 0 3.125%; margin: 0 auto; } .l-container::after { display: table; content: ""; clear: both; } .l-second-layer .l-container { width: 1100px; max-width: 100%; padding: 0 20px; margin-bottom: 150px; } .l-third-layer .l-container { padding: 0 20px; margin-bottom: 150px; } .l-container .l-side, .container .l-side { width: 26.4%; max-width: 270px; float: right; } /* ===================== l-contents ===================== */ .l-contents { width: 71.3%; max-width: 730px; float: left; margin-bottom: 60px; } .l-second-layer .l-contents { width: 100%; max-width: 100%; float: none; } @media screen and (min-width: 768px) { .l-contents { margin-bottom: 30px; } } /* ===================== l-contblock ===================== */ .l-contblock { margin-bottom: 60px; } .l-contblock:last-child { margin-bottom: 0; } @media screen and (min-width: 768px) { .l-container { max-width: 100%; } } @media screen and (max-width: 767.9px) { .l-container { width: 100%; padding: 0 5.3% 20px; } .l-second-layer .l-container { width: 100%; padding: 0 5.3%; margin-bottom: 120px; } .l-third-layer .l-container { padding: 0 5.3%; margin-bottom: 120px; } .l-contents { width: 100%; float: none; margin-bottom: 0; } } a { color: var(--ncb-black); text-decoration: none; } a:hover, a:active { text-decoration: none; } /****************************************** Component *******************************************/ /* ===================== c-title ===================== */ .c-title--01, .c-title--02, .c-title--03, .c-title--04, .c-title--05 { font-weight: 700; } .c-title--01 { font-size: 2.6rem; margin-bottom: 30px; } @media only screen and (max-width: 767.9px) { .c-title--01 { font-size: 2.4rem; margin-bottom: 20px; } } .c-title--02 { border-bottom: 2px solid var(--gray); font-size: 2.4rem; text-align: center; padding-bottom: 20px; margin-bottom: 30px; position: relative; line-height: 1.4; } .c-title--02::after { background-color: var(--ncb-orange); content: ""; display: block; height: 3px; position: absolute; width: 100px; bottom: -3px; left: 0; right: 0; margin: auto; } @media only screen and (max-width: 767.9px) { .c-title--02 { font-size: 2.2rem; margin-bottom: 30px; } } .c-title--02 > span { font-size: 1.6rem; display: block; padding-bottom: 8px; } .c-title--03 { font-size: 1.8rem; background-color: var(--lt-beige); position: relative; min-height: 50px; padding: 10px 10px 10px 30px; margin-bottom: 20px; } .c-title--03::before { background: var(--ncb-orange); width: 4px; height: 26px; content: ""; position: absolute; top: 12px; left: 16px; } .c-title--03 > span { color: var(--ncb-orange); padding-right: 12px; position: relative; top: 1px; bottom: auto; max-width: 30%; } .c-title--point > .c-title--03 { padding: 12px 10px 10px 30px; display: flex; align-items: flex-start; line-height: 1.4; } .c-title--point > .c-title--03::before { top: 14px; bottom: unset; margin: unset; } @media only screen and (max-width: 767.9px) { .c-title--03 { font-size: 1.6rem; } .c-title--point > .c-title--03 { line-height: 1.6; } .c-title--point > .c-title--03::before { top: 12px; } } .c-title--04 { font-size: 1.6rem; margin-bottom: 20px; padding-left: 24px; position: relative; } .c-title--04::before { position: absolute; background: var(--ncb-orange); content: ""; width: 10px; height: 10px; left: 0; top: 0.5em; } .c-title--05 { font-size: 1.6rem; margin-bottom: 20px; font-weight: 800; } /* ===================== c-text ===================== */ .c-text { font-size: 1.6rem; font-weight: 400; margin-bottom: 30px; line-height: 1.7; } .c-text--bold { font-size: 1.6rem; font-weight: 700; margin-bottom: 30px; } .c-text--note { padding-left: 0; text-indent: -2rem; margin-left: 2rem; font-size: 1.4rem; margin-bottom: 30px; } .c-text--note::before { content: "※"; margin-right: 8px; font-weight: 500; margin-bottom: 30px; } .c-text--copy01-l, .c-text--copy01-m, .c-text--copy01-s { font-weight: 700; color: var(--ncb-orange); } .c-text--copy01-l { font-size: 2.2rem; margin-bottom: 30px; } .c-text--copy01-m { font-size: 1.8rem; margin-bottom: 30px; } .c-text--copy01-s { font-size: 1.6rem; margin-bottom: 30px; } .c-text--copy02-l, .c-text--copy02-m, .c-text--copy02-s { font-weight: 700; } .c-text--copy02-l { font-size: 2.2rem; margin-bottom: 30px; } .c-text--copy02-m { font-size: 1.8rem; margin-bottom: 30px; } .c-text--copy02-s { font-size: 1.6rem; margin-bottom: 30px; } .c-text--marker { background: linear-gradient(transparent 50%, #FFFF9F 50%); font-weight: 400; } .c-text--inline-note { font-size: 1.4rem; padding: 0 8px; } .c-text--inline-note::before { content: "※"; font-weight: 500; } @media only screen and (max-width: 767.9px) { .c-text--copy01-l, .c-text--copy02-l { font-size: 2rem; } .c-text--copy01-m, .c-text--copy02-m { font-size: 1.8rem; } } /* ===================== list ===================== */ .c-list--disc, .c-list--number { margin-bottom: 20px; } .c-list__item { padding-left: 20px; margin-bottom: 12px; position: relative; font-size: 1.6rem; } .c-list--disc > .c-list__item::before { position: absolute; background-color: var(--ncb-orange); content: ""; width: 4px; height: 4px; left: 0; top: 0.6em; } .c-list--nest { margin-top: 12px; } .c-list--nest > .c-list__item { padding-left: 16px; } .c-list--nest > .c-list__item::before { position: absolute; background-color: transparent; border-radius: 0; content: "-"; color: var(--ncb-orange); left: 0; top: 2px; } .c-list--number { counter-reset: list_number; position: relative; } .c-list--number > .c-list__item { padding-left: calc(20px + 1rem); } .c-list--number1 { counter-reset: list_number1; } .c-list--number1 > .c-list__item { margin-top: 12px; } .c-list--number > .c-list__item::before { color: initial; position: absolute; content: counter(list_number) "."; counter-increment: list_number; left: 0; top: 3px; font-weight: 400; } .c-list--number1 > .c-list__item::before { position: absolute; content: counter(list_number1) "."; counter-increment: list_number1; left: 0; top: 3px; } .c-list--nest-number { counter-reset: nest_number; position: relative; } .c-list--nest-number > .c-list__item { padding-left: 30px; margin-top: 12px; } .c-list--nest-number > .c-list__item::before { position: absolute; content: "(" counter(nest_number) ")"; counter-increment: nest_number; left: 0; top: 2px; text-align: center; width: fit-content; } .c-list--nest-number > .c-list__item > .c-list--nest-number { counter-reset: nest_2_number; } .c-list--nest-number > .c-list__item > .c-list--nest-number > .c-list__item { padding-left: calc(20px + 1rem); } .c-list--nest-number > .c-list__item > .c-list--nest-number > .c-list__item::before { content: counter(nest_2_number); counter-increment: nest_2_number; background-color: transparent; border: 1px solid #000; border-radius: 50%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; height: 16px; width: 16px; color: #000; font-size: 1.2rem; line-height: 1; top: 3px; } .c-list--nest-number > .c-list__item > .c-list--nest-number > .c-list__item > .c-list--nest-number { counter-reset: nest_alphabet; } .c-list--nest-number > .c-list__item > .c-list--nest-number > .c-list__item > .c-list--nest-number > .c-list__item:before { content: counter(nest_alphabet, upper-alpha) "."; counter-increment: nest_alphabet; border: none; font-size: 1.4rem; } /* new list style */ .c-list--number2 { counter-reset: list_number2; } .c-list--number2 > .c-list__item:before { position: absolute; content: "(" counter(list_number2) ")"; counter-increment: list_number2; left: 0; top: 2px; text-align: center; width: fit-content; } .c-list--number3 { counter-reset: list_number3; } .c-list--number3 > .c-list__item:before { content: counter(list_number3); counter-increment: list_number3; background-color: transparent; border: 1px solid #000; border-radius: 50%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; height: 16px; width: 16px; color: #000; font-size: 1.2rem; line-height: 1; top: 3px; } .c-list--number4 { counter-reset: list_number4; } .c-list--number4 > .c-list__item:before { content: counter(list_number4, upper-alpha) "."; counter-increment: list_number4; border: none; } .c-list--number5 { counter-reset: list_number5; } .c-list--number5 > .c-list__item:before { content: counter(list_number5, lower-alpha) "."; counter-increment: list_number5; border: none; } .c-list--number6 { counter-reset: list_number6; } .c-list--number6 > .c-list__item:before { content: counter(list_number6, upper-roman) "."; counter-increment: list_number6; border: none; } .c-list--number7 { counter-reset: list_number7; } .c-list--number7 > .c-list__item:before { content: counter(list_number7, lower-roman) "."; counter-increment: list_number7; border: none; } .c-list--number > .c-list__item > .c-list--number { margin-top: 12px; } .c-list--note { font-size: 1.4rem; margin-top: 12px; position: relative; } .c-list--note > .c-list__item { padding-left: 0; text-indent: -2rem; margin-left: 2rem; font-size: 1.4rem; } .c-list--note > .c-list__item::before { content: "※"; margin-right: 8px; font-weight: 400; } .c-list--note > .c-list__item > * { padding-left: 0; text-indent: 0; } .c-list--note > .c-list__item > .c-list--disc > .c-list__item { padding-left: calc(2rem + 28px); } .c-list--note > .c-list__item > .c-list--note .c-list--note > .c-list__item:not(:last-of-type) { margin-bottom: 8px; } p.c-list--note { text-indent: calc(-1 * (1rem + 8px)); margin-left: calc(1rem + 8px); } p.c-list--note:before { content: "※"; margin-right: 8px; font-weight: 700; } .c-list--note.c-list--note-number { counter-reset: note_number; } .c-list--note.c-list--note-number > .c-list__item::before { content: "※" counter(note_number); counter-increment: note_number; font-weight: 400; } .c-list--note.c-list--note-number > .c-list__item { text-indent: calc(-1 * (2rem + 8px)); margin-left: calc(2rem + 8px); } .c-list--free01 { text-indent: -1em; padding-left: 1em; margin-bottom: 12px; } .c-list--free02 { text-indent: -1.5em; padding-left: 1.5em; margin-bottom: 12px; } .c-list--free03 { text-indent: -2em; padding-left: 2em; margin-bottom: 12px; } .c-list--attention { font-size: 1.6rem; padding-left: 25px; margin-bottom: 8px; position: relative; } .c-list--attention::before { content: ""; width: 17px; height: 15px; display: block; background: url(../img/ft/icon_link_alert.svg) no-repeat; background-size: 100%; position: absolute; top: 5px; left: 0; } .c-list--check01 { padding-left: 22px; margin-bottom: 10px; position: relative; font-size: 1.6rem; } .c-list--check01::before { content: ""; width: 15px; height: 14px; display: block; background: url(../img/ft/icon_link_check.svg) no-repeat; background-size: 100%; position: absolute; top: 6px; left: 0; } .c-list--check02 { padding-left: 24px; margin-bottom: 12px; position: relative; font-size: 1.6rem; } .c-list--check02::before { content: ""; width: 15px; height: 14px; display: block; background: url(../img/ft/icon_link_check.svg) no-repeat; background-size: 100%; position: absolute; top: 7px; left: 0; } .c-list--check02 > span.c-text--bold { display: block; font-size: 1.8rem; margin-bottom: 12px; } .c-list--clickable { overflow-x: auto; margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 20px 30px; } .c-list--clickable .c-list__item { width: 100%; padding: 0 20px 20px; margin-bottom: 0; background-image: linear-gradient(to right, #DDD 2px, transparent 2px); background-size: 4px 1px; background-repeat: repeat-x; background-position: left bottom; } .c-list--clickable .c-list__link { width: fit-content; display: block; font-size: 1.6rem; } .c-list--clickable .c-list__link::after { display: none; } .c-list--clickable .c-list__link span { position: relative; } .c-list--clickable .c-list__link span::after { display: inline-block; background-repeat: no-repeat; background-size: contain; content: ""; position: relative; bottom: -2px; width: 16px; height: 16px; right: -2px; } .c-list--clickable .c-list__link.c-link--blank span::after { background-image: url(../img/ft/icon_link_blank.svg); width: 16px; height: 16px; right: 0; } .c-list--clickable .c-list__link.c-link--pdf span::after { background-image: url(../img/ft/icon_link_pdf.svg); width: 34px; height: 17px; right: -3px; } .c-list--clickable .c-list__link.c-link--doc span::after { background-image: url(../img/ft/icon_link_document.svg); width: 16px; height: 16px; right: 0; } .c-list--clickable .c-list__link.c-link--modal span::after { background-image: url(../img/ft/icon_link_modal.webp); width: 16px; height: 16px; right: 0; } @media only screen and (min-width: 768px) { .c-list--clickable .c-list__link:hover { text-decoration: underline; } } @media only screen and (max-width: 767.9px) { .c-list--check02 > span.c-text--bold { font-size: 1.6rem; } .c-list--clickable { margin-bottom: 30px; flex-direction: column; gap: 15px 0; } .c-list--clickable .c-list__item { width: 100%; padding: 0 15px 15px; } } /* ===================== c-link ===================== */ .c-link, .c-link--blank, .c-link--pdf, .c-link--doc, .c-link--modal, .c-anchor__text { color: var(--ncb-blue); text-decoration-line: underline; position: relative; } .c-link--blank { padding-left: 2px; /* padding-right: 24px; */ margin-right: 0.5rem; } .c-link--blank::after { background-image: url(../img/ft/icon_link_blank.svg); background-repeat: no-repeat; background-size: contain; content: ""; width: 16px; height: 16px; display: inline-block; position: relative; /* top: 0; */ /* right: auto; */ bottom: -2px; } .c-link--pdf { padding-left: 2px; /* padding-right: 46px; */ margin-right: 0.5rem; } .c-link--pdf::after { background-image: url(../img/ft/icon_link_pdf.svg); background-repeat: no-repeat; background-size: contain; content: ""; width: 34px; height: 17px; display: inline-block; position: relative; /* top: 0; */ right: -4px; bottom: -3px; } .c-link--doc { padding-left: 2px; /* padding-right: 24px; */ margin-right: 0.5rem; } .c-link--doc::after { background-image: url(../img/ft/icon_link_document.svg); background-repeat: no-repeat; background-size: contain; content: ""; width: 16px; height: 16px; display: inline-block; position: relative; /* top: 0; */ /* right: 6px; */ bottom: -2px; } .c-link--modal { padding-left: 2px; /* padding-right: 24px; */ margin-right: 0.5rem; } .c-link--modal::after { background-image: url(../img/ft/icon_link_modal.webp); background-repeat: no-repeat; background-size: contain; content: ""; width: 16px; height: 16px; display: inline-block; position: relative; /* top: 0; */ /* right: 6px; */ bottom: -2px; } .c-link--list li { padding-bottom: 8px; } .c-anchor__text { padding-left: 2px; padding-right: 28px; } .c-anchor__text::after { background-image: url(../img/ft/icon_link_anchor_text.svg); background-repeat: no-repeat; content: ""; width: 24px; height: 24px; position: absolute; /* top: -4px; */ right: 0; bottom: -4px; } dd > .c-link--blank:after { bottom: -2px; } @media screen and (max-width: 767.9px) { .c-link--blank::after, .c-link--pdf::after, .c-link--doc::after, .c-link--modal::after { top: auto; bottom: 0; } .c-anchor__text::after { top: auto; bottom: -4px; } } @-moz-document url-prefix() { .c-link--blank::after, .c-link--pdf::after, .c-link--doc::after, .c-link--modal::after { top: auto; bottom: auto; right: auto; } .c-link--blank::after { margin-left: 5px; margin-top: 4px; } .c-link--pdf::after { margin-left: 6px; margin-top: 2px; } .c-link--doc::after { margin-left: 5px; margin-top: 2px; } .c-link--modal::after { margin-left: 5px; margin-top: 2px; } .c-list--note .c-list__item .c-link--blank::after, .c-list--note .c-list__item .c-link--pdf::after, .c-list--note .c-list__item .c-link--doc::after, .c-list--note .c-list__item .c-link--modal::after { margin-top: 0; bottom: -2px; } } /* ===================== c-anchor ===================== */ .c-anchor__2col, .c-anchor__2col--icon, .c-anchor__3col, .c-anchor__3col--icon, .c-anchor__4col, .c-anchor__4col--icon { display: flex; flex-wrap: wrap; justify-content: flex-start; list-style: none; gap: 20px; font-size: 1.8rem; margin-bottom: 20px; } .c-anchor__3col, .c-anchor__3col--icon { max-width: 520px; margin: 0 auto 20px; } .c-anchor__4col, .c-anchor__4col--icon { max-width: 700px; margin: 0 auto 20px; } .c-anchor__2col a, .c-anchor__2col--icon a, .c-anchor__3col a, .c-anchor__3col--icon a, .c-anchor__4col a, .c-anchor__4col--icon a { display: block; color: var(--ncb-black); position: relative; text-decoration: none; background-color: var(--lt-beige); border-radius: 8px; box-sizing: border-box; } .c-anchor__2col .c-anchor__btn, .c-anchor__2col--icon .c-anchor__btn { width: calc((100% - 20px) / 2); } .c-anchor__3col .c-anchor__btn, .c-anchor__3col--icon .c-anchor__btn { width: calc((100% - 40px) / 3); } .c-anchor__4col .c-anchor__btn, .c-anchor__4col--icon .c-anchor__btn { width: calc((100% - 60px) / 4); } .c-anchor__2col .c-anchor__btn a, .c-anchor__2col--icon .c-anchor__btn a, .c-anchor__3col .c-anchor__btn a, .c-anchor__3col--icon .c-anchor__btn a, .c-anchor__4col .c-anchor__btn a, .c-anchor__4col--icon .c-anchor__btn a { display: flex; padding: 20px 12px 42px; height: 100%; box-sizing: border-box; text-align: center; line-height: 1.4; } .c-anchor__2col .c-anchor__btn a, .c-anchor__3col .c-anchor__btn a, .c-anchor__4col .c-anchor__btn a { justify-content: center; align-items: center; } .c-anchor__2col--icon .c-anchor__btn a, .c-anchor__3col--icon .c-anchor__btn a, .c-anchor__4col--icon .c-anchor__btn a { flex-direction: column; align-items: center; justify-content: flex-start; } .c-anchor__2col .c-anchor__btn a::after, .c-anchor__2col--icon .c-anchor__btn a::after, .c-anchor__3col .c-anchor__btn a::after, .c-anchor__3col--icon .c-anchor__btn a::after, .c-anchor__4col .c-anchor__btn a::after, .c-anchor__4col--icon .c-anchor__btn a::after { background-image: url(../img/ft/icon_arrow_down.svg); background-repeat: no-repeat; content: ""; width: 24px; height: 24px; position: absolute; top: unset; bottom: 12px; right: 0; left: 0; margin: auto; } .c-anchor__2col--icon .c-anchor__btn a img, .c-anchor__3col--icon .c-anchor__btn a img, .c-anchor__4col--icon .c-anchor__btn a img { width: 48px; height: 48px; } .c-anchor__2col--icon .c-anchor__btn a > span, .c-anchor__3col--icon .c-anchor__btn a > span, .c-anchor__4col--icon .c-anchor__btn a > span { flex-grow: 1; display: flex; align-items: center; } .c-anchor__2col a:hover, .c-anchor__2col--icon a:hover, .c-anchor__3col a:hover, .c-anchor__3col--icon a:hover, .c-anchor__4col a:hover, .c-anchor__4col--icon a:hover { background: var(--lt-gray); } @media screen and (max-width: 767.9px) { .c-anchor__2col, .c-anchor__2col--icon, .c-anchor__3col, .c-anchor__3col--icon, .c-anchor__4col, .c-anchor__4col--icon { gap: 15px; font-size: 1.6rem; } .c-anchor__2col .c-anchor__btn, .c-anchor__2col--icon .c-anchor__btn, .c-anchor__3col .c-anchor__btn, .c-anchor__3col--icon .c-anchor__btn, .c-anchor__4col .c-anchor__btn, .c-anchor__4col--icon .c-anchor__btn { width: calc((100% - 15px) / 2); } .c-anchor__2col .c-anchor__btn a, .c-anchor__3col .c-anchor__btn a, .c-anchor__4col .c-anchor__btn a { padding: 20px 12px 31px; } .c-anchor__2col--icon .c-anchor__btn a, .c-anchor__3col--icon .c-anchor__btn a, .c-anchor__4col--icon .c-anchor__btn a { padding: 12px 12px 31px; } .c-anchor__2col .c-anchor__btn a::after, .c-anchor__2col--icon .c-anchor__btn a::after, .c-anchor__3col .c-anchor__btn a::after, .c-anchor__3col--icon .c-anchor__btn a::after, .c-anchor__4col .c-anchor__btn a::after, .c-anchor__4col--icon .c-anchor__btn a::after { bottom: 5px; } } @media print { .c-anchor__2col .c-anchor__btn a, .c-anchor__2col--icon .c-anchor__btn a, .c-anchor__3col .c-anchor__btn a, .c-anchor__3col--icon .c-anchor__btn a, .c-anchor__4col .c-anchor__btn a, .c-anchor__4col--icon .c-anchor__btn a { box-sizing: border-box; } .c-anchor__2col, .c-anchor__2col--icon, .c-anchor__3col, .c-anchor__3col--icon, .c-anchor__4col, .c-anchor__4col--icon { justify-content: space-around; } } /* ===================== c-button ===================== */ .c-btn { width: 250px; height: auto; margin: 0 auto 20px; /* margin-bottom: 20px; */ font-size: 1.6rem; } .c-btn-wide { width: 300px; height: auto; margin: 0 auto 30px; /* margin-bottom: 30px; */ font-size: 1.6rem; } .c-btn a, .c-btn-wide a, .c-btn--more a, .c-btn--close a, .c-btn--return a, .c-btn--modal button { display: block; text-align: center; position: relative; text-decoration: none; border: 1px solid var(--gray); background-color: var(--white); color: var(--ncb-black); border-radius: 9999px; } .c-btn a { padding: 12px 50px 12px 20px; } .c-btn-wide a { padding: 12px 60px 12px 24px; } .c-btn--more a, .c-btn--close a { padding: 12px 40px 12px 24px; } .c-btn--return a { padding: 12px 24px; } .c-btn--return a:before { display: inline-block; content: ""; width: 11px; height: 9px; background: url(../img/ft/icon_arrow_return.svg) center/contain no-repeat; position: absolute; left: 22px; top: 0; bottom: 0; margin: auto; } .c-btn-cv { width: 250px; height: auto; margin: 0 auto 30px; /* margin-bottom: 30px; */ border-radius: 30px; text-align: center; font-size: 1.6rem; } .c-btn-cv.c-btn-wide { width: 300px; } .c-btn-cv a, .c-btn-cv.c-btn--modal button { display: block; text-align: center; position: relative; text-decoration: none; background-color: var(--ncb-orange); border-radius: 9999px; color: var(--white); position: relative; text-decoration: none; padding: 13px 50px 13px 24px; } .c-btn-wide.c-btn-cv a, .c-btn-cv.c-btn--modal button { border: none; } .c-btn--more, .c-btn--close { width: 224px; height: auto; font-size: 1.6rem; margin: 0 auto 30px; } .c-btn--return { width: 250px; height: auto; font-size: 1.6rem; margin: 0 auto 40px; } .c-btn--modal button { width: 100%; cursor: pointer; } .c-btn--01::after, .c-btn--02::after, .c-btn--03::after, .c-btn--04::after, .c-btn--05::after, .c-btn--more a::after, .c-btn--close a::after { background-repeat: no-repeat; content: ""; position: absolute; top: 0; bottom: 0; margin: auto; right: 12px; } .c-btn--01::after { background-image: url(../img/ft/icon_btn_01.svg); width: 32px; height: 32px; } .c-btn--02::after { background-image: url(../img/ft/icon_btn_02.svg); width: 24px; height: 24px; } .c-btn--03::after { background-image: url(../img/ft/icon_btn_03.svg); width: 34px; height: 17px; } .c-btn--04::after { background-image: url(../img/ft/icon_btn_04.svg); width: 22px; height: 22px; } .c-btn--05::after { background-image: url(../img/ft/icon_btn_05.webp); background-size: contain; width: 24px; height: 24px; } .c-btn--more a::after, .c-btn--close a::after { background-image: url(../img/ft/icon_arrow_down.svg); width: 24px; height: 24px; } .c-btn--close a::after { background-image: url(../img/ft/icon_arrow_up.svg); } .c-btn-cv > .c-btn--01::after { background-image: url(../img/ft/icon_cvbtn_01.svg); } .c-btn-cv > .c-btn--02::after { background-image: url(../img/ft/icon_cvbtn_02.svg); } .c-btn-cv > .c-btn--03::after { background-image: url(../img/ft/icon_btn_03_cv.svg); } .c-btn-cv > .c-btn--05::after { filter: brightness(0) saturate(100%) invert(100%) sepia(9%) saturate(0%) hue-rotate(198deg) brightness(114%) contrast(100%); } .c-btn--modal button { padding: 12px 37px 12px 20px; } .c-btn-cv.c-btn--modal button { padding: 13px 37px 13px 20px; } .c-btn__cv1col { border: 1px solid var(--gray); border-radius: 10px; padding: 30px 30px; } .c-btn__title { font-size: 1.6rem; text-align: center; margin-bottom: 15px; font-weight: 700; } .c-btn__cv1co2 { border: 1px solid var(--gray); border-radius: 10px; padding: 30px 30px; } .c-btn__cv1co2 .c-btn__wrap { display: flex; flex-direction: column; } .c-btn__cv1co2 .c-btn__wrap .c-btn-cv, .c-btn__cv1co2 .c-btn__wrap .c-btn { flex-grow: 1; } .c-btn__cv1co2 .c-btn-cv > a, .c-btn__cv1co2 .c-btn > a { height: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .c-btn--caution { width: 100%; font-size: 1.6rem; background-color: var(--white); border: 1px solid var(--ncb-red); /* padding: 24px; */ text-align: center; margin-bottom: 40px; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; } .c-btn--caution a { color: var(--ncb-red); display: inline-block; width: 100%; padding: 24px; } .c-btn__col { display: flex; justify-content: center; column-gap: 30px; } .c-btn__col > .c-btn { height: auto; margin-left: 0; margin-right: 0; } .c-btn__col > .c-btn-cv { margin-left: 0; margin-right: 0; } .c-btn__col > .c-btn--col3 { max-width: 228px; } .c-btn__col > .c-btn--col4 { max-width: 167px; } .c-info--04 .c-btn__col .c-btn-cv, .c-info--04 .c-btn__col .c-btn { margin-left: 0; margin-right: 0; margin-bottom: 0; } .c-btn:hover, .c-btn-wide:hover, .c-btn-cv:hover, .c-btn--more:hover, .c-btn--close:hover, .c-btn--return:hover, .c-btn--small:hover, .c-btn--caution:hover { opacity: 0.8; } .c-btn__readmore { width: 630px; background: var(--lt-beige); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; padding: 20px 40px; } .c-btn__readmore + .c-btn__readmore { margin-top: 20px; } .c-btn__readmore p { font-size: 2rem; line-height: 1.45; margin-right: 20px; } .c-btn__readmore .c-btn { margin-bottom: 0; } .c-btn .c-btn--anchor:after { background-image: url(../img/ft/icon_arrow_anchor_button.svg); } @media screen and (max-width: 767.9px) { .c-btn__col { flex-wrap: wrap; } .c-btn__title { margin-bottom: 10px; } .c-btn__cv1col { padding: 15px 15px 20px; } .c-btn__cv1col .c-btn-cv, .c-btn__cv1col .c-btn { margin: 0 auto 15px; } .c-btn__cv1co2 { padding: 15px 15px 20px; } .c-btn__cv1co2 .c-btn__col { flex-direction: column; align-items: center; } .c-btn__cv1co2 .c-btn-cv, .c-btn__cv1co2 .c-btn { margin-bottom: 15px; } .c-btn__readmore { width: 335px; flex-direction: column; padding: 24px 20px; } .c-btn__readmore p { font-size: 1.6rem; text-align: center; line-height: 1.5; margin-right: 0; margin-bottom: 10px; } .c-btn__col > .c-btn--col3, .c-btn__col > .c-btn--col4 { max-width: 100%; } } /* ===================== c-columns ===================== */ .c-columns { margin-bottom: 30px; } .c-columns__col { width: 100%; display: flex; flex-direction: column; } .c-columns__title { font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; } .c-figure > figcaption { padding-top: 10px; } .c-figure img { max-width: 100%; vertical-align: top; } .c-columns, .c-columns--sp2col { display: flex; margin-bottom: 30px; gap: 30px 20px; } .c-columns__col--sm { max-width: 30%; } .c-columns__col--lg { max-width: 70%; } .c-info--04 .c-btn__col .c-btn-cv, .c-info--04 .c-btn__col .c-btn { margin-bottom: 14px; } @media screen and (max-width: 767.9px) { .c-columns { flex-wrap: wrap; } .c-columns--sp2col > .c-columns__col { width: 48%; } .c-columns--sp2col { gap: 10px; flex-wrap: wrap; } .c-columns__col--sm { max-width: 100%; } .c-columns__col--lg { max-width: 100%; } .c-columns__col--lg .c-text { margin-bottom: 0; } } /* ===================== c-img ===================== */ .c-img { display: block; margin: 0 auto; } /* ===================== c-card ===================== */ .c-card__list { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; } .c-card__item { width: 100%; max-width: 47%; border: 1px solid var(--blue-gray); border-radius: 10px; transition: all 0.2s; } .c-card__item a { display: block; height: 100%; text-decoration: none; opacity: 1; flex-grow: 1; } .c-card__item img { max-width: 100%; height: auto; border-radius: 8px 8px 0 0; } .c-card__text-box { width: 100%; padding: 20px; } .c-card__text-box > .c-text { color: var(--ncb-black); margin-bottom: 20px; } .c-card__title { color: var(--ncb-blue); text-decoration: underline; font-size: 20px; font-weight: 700; margin-bottom: 20px; } .c-card__item--nolink .c-card__title { color: var(--ncb-black); text-decoration: none; } .c-card__item--single { width: 100%; max-width: 100%; border: 1px solid var(--blue-gray); border-radius: 10px; transition: all 0.2s; } .c-card__item--single a, .c-card__item--single > div { display: flex; text-decoration: none; } .c-card__item--single a img, .c-card__item--single > div img { width: 48%; border-radius: 8px 0 0 8px; } .c-card__item--single .c-card__text-box { padding: 20px 25px; } .c-card__tag { display: flex; flex-wrap: wrap; gap: 4px; } .c-card__tag li { color: #fff; font-size: 12px; display: inline-block; border-radius: 24px; padding: 2px 12px 4px; } .c-card__text-box--side { width: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: center; } .c-card__text-box--side > .c-text { color: var(--ncb-black); margin-bottom: 20px; } .c-card__text-box--side > h3 { padding-right: 40px; margin: 0 0 20px 0; } .c-card__list--ttl { align-items: stretch; } .c-card__list--ttl .c-card__item, .c-card__list--ttl .c-card__item a { display: flex; } .c-card__list--ttl .c-card__text-box { padding: 0; display: flex; flex-direction: column; } .c-card__list--ttl .c-card__title { color: var(--ncb-black); text-decoration: none; background: var(--lt-beige); padding: 10px 72px 10px 20px; margin-bottom: 0; border-radius: 10px 10px 0 0; position: relative; /* flex: 1 0 auto; */ } .c-card__list--ttl .c-card__title:after { display: inline-block; content: ""; width: 32px; height: 32px; background: url(../img/ft/icon_btn_01.svg) center/contain no-repeat; position: absolute; top: 10px; right: 20px; } .c-card__bottom { padding: 20px; } .c-card__bottom .c-text { color: var(--ncb-black); } .c-card__list--ttl .c-card__text-box--blank .c-card__bottom .c-text:after, .c-card__list--ttl .c-card__text-box--pdf .c-card__bottom .c-text:after, .c-card__list--ttl .c-card__text-box--doc .c-card__bottom .c-text:after { display: inline-block; content: ""; position: relative; background-position: center; background-size: contain; background-repeat: no-repeat; margin-left: 2px; } .c-card__list--ttl .c-card__text-box--blank .c-card__title:after, .c-card__list--ttl .c-card__text-box--pdf .c-card__title:after { background: url(../img/ft/icon_btn_blank.svg) center/contain no-repeat; } .c-card__list--ttl .c-card__text-box--pdf .c-card__bottom .c-text:after { background-image: url(../img/ft/icon_link_pdf.svg); width: 34px; height: 17px; bottom: -1px; } .c-card__list--ttl .c-card__text-box--doc .c-card__title:after { background: url(../img/ft/icon_btn_doc.svg) center/contain no-repeat; } @media screen and (min-width: 768px) { .c-card__item:hover, .c-card__item--single:hover { opacity: 0.8; } .c-card__item:hover a:hover > img, .c-card__item--single:hover a:hover > img { opacity: 1; } .c-card__item--nolink:hover { opacity: 1; } .c-card__item:last-of-type:nth-of-type(odd) { margin-right: auto; } .l-second-layer .c-card__item:last-of-type:nth-of-type(odd) { margin-left: 15px; } .l-third-layer .c-card__item:last-of-type:nth-of-type(odd) { margin-left: 6px; } } @media screen and (max-width: 767.9px) { .c-card__item { width: 100%; max-width: 100%; } .c-card__item--single a, .c-card__item--single > div { flex-direction: column; } .c-card__item--single a img, .c-card__item--single > div img { width: 100%; border-radius: 8px 8px 0 0; } .c-card__item--single .c-card__text-box { padding: 20px; } .c-card__text-box--side > h3 { margin-bottom: 20px; } } /* ===================== c-box tag ===================== */ .tag--orange { background-color: var(--ncb-orange); } .tag--blue { background-color: var(--ncb-blue); } .tag--green { background-color: var(--ncb-green); } .tag--pink { background-color: var(--ncb-pink); } .tag--lt-blue { background-color: var(--ncb-Lt-blue); } /* ===================== c-box ===================== */ .c-box--gray-h, .c-box--orange-h, .c-box--beige-h, .c-box--red-h { display: flex; flex-direction: column; flex-grow: 1; } .c-box--gray, .c-box--orange, .c-box--green, .c-box--blue, .c-box--pink { flex-grow: 1; } .c-box--gray-h { background-color: var(--lt-gray); padding: 10px; border-radius: 10px; margin-bottom: 40px; } .c-box--orange-h { background-color: var(--lt-orange); padding: 10px; border-radius: 10px; margin-bottom: 40px; } .c-box--beige-h { background-color: var(--lt-beige); padding: 10px; border-radius: 10px; margin-bottom: 40px; } .c-box--red-h { background-color: var(--lt-red); padding: 10px; border-radius: 10px; margin-bottom: 40px; } .c-box__title { font-size: 1.6rem; color: var(--ncb-black); font-weight: 700; padding: 2px 10px 12px 10px; } .c-box__item { padding: 30px; background-color: var(--white); border-radius: 10px; flex-grow: 1; } .c-box--gray { border: 1px solid var(--gray); border-radius: 10px; padding: 20px; margin-bottom: 40px; } .c-box--orange { border: 1px solid var(--ncb-yellow); border-radius: 10px; padding: 20px; margin-bottom: 40px; } .c-box--green { border: 1px solid var(--ncb-green); border-radius: 10px; padding: 20px; margin-bottom: 40px; } .c-box--blue { border: 1px solid var(--ncb-Lt-blue); border-radius: 10px; padding: 20px; margin-bottom: 40px; } .c-box--pink { border: 1px solid var(--ncb-pink); border-radius: 10px; padding: 20px; margin-bottom: 40px; } .c-box--beige-bg { background: var(--lt-beige); border-radius: 10px; padding: 20px; margin-bottom: 40px; } .c-box--lt-blue-bg { background: var(--lt-blue-gray); border-radius: 10px; padding: 20px; margin-bottom: 40px; } .c-box--gray-bg { background: var(--lt-gray); border-radius: 10px; padding: 20px; margin-bottom: 40px; } .c-box--attention { background-color: var(--lt-red); padding: 10px; border-radius: 10px; margin-bottom: 40px; } .c-box__attention-title { font-size: 1.6rem; font-weight: 700; color: var(--ncb-red); padding: 6px 10px 16px 40px; position: relative; } .c-box__attention-title::before { content: ""; width: 24px; height: 24px; display: block; background: url(../img/ft/icon_link_alert.svg) no-repeat; background-size: 100%; position: absolute; top: 8px; left: 6px; } .c-box--point { border: 1px solid var(--ncb-orange); border-radius: 10px; padding: 20px; position: relative; margin-bottom: 40px; } .c-box--point-icon { width: fit-content; height: 30px; text-align: center; line-height: 30px; color: #FFF; font-size: 1.8rem; padding: 0 2rem; letter-spacing: 2px; background: #F6852E; border-radius: 50px; position: absolute; top: -18px; left: 0; right: 0; margin: auto; } .c-box-adobe { border: 1px solid var(--gray); border-radius: 10px; padding: 20px; margin-bottom: 40px; } .c-box-adobe > .c-text { text-align: center; } .c-box-adobe .c-link--blank { display: inline-block; padding-right: 0; } .c-box-adobe .c-link--blank:after { right: 0; } .c-box-app { border: 1px solid var(--gray); border-radius: 10px; margin-bottom: 40px; } .c-box-app > .c-box__title { background-color: var(--lt-gray); font-size: 1.8rem; color: var(--ncb-black); text-align: center; font-weight: 700; padding: 13px; border-radius: 10px 10px 0 0; } .c-box-app--cv > .c-box__title { background: #F07824; color: var(--white); } .c-box-app__inner { display: flex; margin: 25px auto; justify-content: center; column-gap: 38px; } .c-box-app__inner + .c-list--note { margin-bottom: 25px; display: flex; justify-content: center; align-items: center; gap: 20px; } .c-box-app__inner + .c-list--note > .c-list__item { margin-bottom: 0; } .c-box-app__item { max-width: 290px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .c-box-app__text { width: 60%; min-width: 147px; margin-left: 16px; } .c-box-app__text p { font-size: 1.6rem; font-weight: 500; padding-bottom: 8px; } .c-box-app img { width: auto; } .c-box-app__item > img { width: 80px; height: 80px; } .c-box-app__item > .c-list--note { width: 100%; margin-left: 12px; } @media screen and (max-width: 1024px) and (min-width: 768px) { .c-box-app__text p { font-size: 1.4rem; } } @media screen and (max-width: 767.9px) { .c-box-app__item { width: 100%; } .c-box-app__inner { margin: 25px auto 15px; } .c-box-app__item > .c-list--note { width: fit-content; } .c-box-app__inner + .c-list--note { margin-bottom: 25px; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 300px; margin: 0 auto 25px; } } .c-modal--new-normal__box:has(.c-app-box) { padding: 0; border-radius: 10px; } .c-modal--new-normal__box:has(.c-app-box) .c-modal--new-normal__inner { width: 100%; } .c-app-box__title { text-align: center; font-size: 18px; font-weight: 700; padding: 15px; background: var(--lt-gray); } .c-app-box__inner { padding: 25px 0; } .c-app-box__inner--text { text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 15px; } .c-app-box__inner--img { display: block; margin: 0 auto 25px; } @media screen and (max-width: 767.9px) { .c-app-box__inner--img { width: 80px; height: 80px; } } /* ===================== c-modal ===================== */ .c-modal { display: none; width: 100%; height: 100vh; z-index: 1010; position: fixed; top: 0; left: 0; } .c-modal__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } .c-modal__close { cursor: pointer; } .c-modal--usecase { overflow-y: auto; } .c-modal--usecase, .c-modal--usecase .c-modal__bg, .c-modal--account .c-modal__bg { background: #FFF; } .c-modal--usecase__inner, .c-modal--account__inner { position: relative; text-align: center; } .c-modal--usecase .c-modal__close, .c-modal--account .c-modal__close { width: 36px; height: 36px; position: absolute; top: 35px; right: 45px; } .c-modal--usecase__box { width: 100%; max-width: 820px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 25%); } .c-modal--account__box { width: 680px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 25%); } .c-modal--account .c-modal__button--wrap { width: fit-content; margin: 0 auto 40px; column-gap: 30px; } .c-modal--usecase h2, .c-modal--account h2 { font-size: 2.8rem; line-height: 1.5; margin-bottom: 40px; } .c-modal--usecase h2 { font-weight: 700; margin-bottom: 32px; } .c-modal--usecase__body { font-size: 1.6rem; text-align: center; margin-bottom: 25px; } .c-modal--usecase__note { color: var(--ncb-brown); font-size: 1.4rem; line-height: 1.25; max-width: 510px; margin: 0 auto; text-align: center; } .c-modal__checkbox { text-align: center; padding: 32px 0; margin: 0 auto 40px; background: var(--lt-gray); } .c-modal__checkbox h3 { font-size: 1.8rem; font-weight: 700; margin-bottom: 24px; } .c-modal__checkbox-container { width: 560px; margin: 0 auto 24px; display: flex; flex-wrap: wrap; justify-content: space-between; } .c-modal__checkbox-item { width: 268px; color: var(--ncb-orange); font-size: 1.6rem; font-weight: 700; text-align: center; padding: 16px 0; background: #FFF; border: 1px solid #DDD; border-radius: 4px; cursor: pointer; } .c-modal__checkbox-item.is-checked { border: 1px solid var(--ncb-orange); } .c-modal__checkbox-item input { display: none; } .c-modal__checkbox-item label { width: 100%; display: inline-block; position: relative; } .c-modal__checkbox-item label:before, .c-modal__checkbox-item label:after { display: inline-block; content: ""; position: absolute; } .c-modal__checkbox-item label:before { width: 20px; height: 20px; background: #FFF; border: 1px solid #DDD; border-radius: 2px; left: 16px; top: 0; bottom: 0; margin: auto; } .c-modal__checkbox-item label:after { width: 13px; height: 9px; background: url(../img/ft/img_check_cont.svg) center/contain no-repeat; left: 19px; top: calc((100% - 9px) * 0.5); } .c-modal__checkbox-item.is-checked label:before { border: 0; background: var(--ncb-orange); } .c-modal__checkbox-note { color: var(--ncb-brown); font-size: 1.2rem; line-height: 1.5; max-width: 520px; margin: 0 auto 40px; text-align: center; } .c-modal__button--wrap { display: flex; justify-content: space-between; margin-bottom: 40px; } .c-modal__checkbox-submit .c-btn-cv a { background: #D7D7D7; transition: 0.3s; } .c-modal__checkbox-submit.is-checked .c-btn-cv a { background: var(--ncb-orange); cursor: pointer; transition: 0.3s; } .c-modal__etc { font-size: 1.6rem; text-align: center; margin-bottom: 40px; } .c-modal__attn { background: var(--lt-gray); border-radius: 4px; padding: 28px 0; margin-bottom: 38px; text-align: center; } .c-modal__attn p { font-size: 1.6rem; line-height: 1.5; color: var(--ncb-brown); } .c-modal__return { font-size: 1.8rem; color: var(--ncb-brown); text-decoration: underline; cursor: pointer; } .c-modal--normal .c-modal__bg { background-color: rgba(0, 0, 0, 0.4); } .c-modal--normal__box { width: 100%; max-width: 800px; border-radius: 30px; background: #F7F5F2; padding: 60px 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .c-modal--normal__inner { width: 70%; margin: 0 auto; } .c-modal--normal .c-modal__close { width: 40px; height: 40px; position: absolute; right: 20px; top: 20px; z-index: 1010; } .c-modal--normal__open { cursor: pointer; } .c-modal--new-normal .c-modal__bg, .c-modal--ui .c-modal__bg { background-color: rgba(0, 0, 0, 0.4); } .c-modal--new-normal__wrap, .c-modal--ui__wrap { width: 90%; max-height: 80vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .c-modal--new-normal__wrap { max-width: 820px; } .c-modal--ui__wrap { max-width: 1060px; } .c-modal--new-normal__box, .c-modal--ui__box { width: 100%; height: 100%; max-height: 80vh; border-radius: 20px; background: var(--white); padding: 40px 0; overflow: auto; } .c-modal--new-normal__inner, .c-modal--ui__inner { margin: 0 auto; } .c-modal--new-normal__inner { width: 90%; } .c-modal--ui__inner { width: 92%; } .c-modal--new-normal .c-modal__close, .c-modal--ui .c-modal__close { width: 25px; height: 25px; position: absolute; right: 20px; top: -45px; z-index: 1010; } .c-modal--new-normal__open, .c-modal--ui__open { cursor: pointer; } .c-modal--ui__title { font-size: 26px; font-weight: 700; text-align: center; margin-bottom: 30px; } .c-modal--ui__flow { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; } .c-modal--ui__item { width: calc((100% - 60px) / 4); } .c-modal--ui__step { font-size: 16px; text-align: center; color: #FFF; background: var(--ncb-orange); width: 100px; margin: 0 auto 15px; border-radius: 18px; padding: 4px 0; font-weight: 700; } .c-modal--ui__item img { width: 230px; display: block; margin: 0 auto 15px; } .c-modal--ui__text { font-size: 16px; } @media screen and (min-width: 768px) { .c-modal__button:hover { opacity: 0.8; transition: 0.3s; } } @media screen and (max-width: 767.9px) { .c-box-app__inner { column-gap: 0; } .c-box-adobe > .c-text { text-align: left; } .c-box-app > .c-box__title { font-size: 1.4rem; } .c-box-app__note { font-size: 1.2rem; text-align: center; padding-top: 6px; } .c-box-app__text { min-width: auto; margin: 0; text-align: center; } .c-modal--account .c-modal__close { width: 28px; height: 28px; top: 16px; right: 16px; } .c-modal--account__box { width: 100%; padding: 0 20px; } .c-modal--account h2 { font-size: 2rem; margin-bottom: 28px; } .c-modal__button--wrap { flex-direction: column; row-gap: 16px; } .c-modal__etc { font-size: 1.4rem; line-height: 1.5; } .c-modal__attn { padding: 20px 12px; margin-bottom: 40px; } .c-modal__attn p { font-size: 1.2rem; text-align: left; line-height: 1.6; } .c-modal__return { font-size: 1.6rem; } .c-modal--usecase .c-modal__close, .c-modal--account .c-modal__close { width: 28px; height: 28px; top: 16px; right: 16px; } .c-modal--usecase__box { width: 90%; position: static; transform: none; margin: 0 auto; padding-top: 60px; padding-bottom: 36px; } .c-modal--usecase h2 { font-size: 2.4rem; margin-bottom: 20px; } .c-modal--usecase__body { line-height: 1.5; } .c-modal__checkbox-container { width: 82%; flex-direction: column; gap: 12px 0; } .c-modal__checkbox { padding: 20px 16px; } .c-modal__checkbox h3 { font-size: 1.6rem; line-height: 1.5; margin-bottom: 20px; } .c-modal__checkbox-item { width: 100%; text-align: left; } .c-modal__checkbox-item label { padding-left: 38px; } .c-modal__checkbox-item label:before { width: 16px; height: 16px; left: 12px; } .c-modal__checkbox-item label:after { width: 10px; height: 7px; left: 15px; top: calc((100% - 7px) * 0.5); } .c-modal--usecase__note { font-size: 1.2rem; text-align: left; } .c-modal__checkbox-note { text-align: left; } .c-modal--normal__box { max-width: 335px; padding: 40px 20px; } .c-modal--normal__inner { width: 100%; } .c-modal--ui__inner { width: 88%; } .c-modal--new-normal__box, .c-modal--ui__box { max-height: calc(90vh - 55px); } .c-modal--ui__title { font-size: 18px; margin-bottom: 20px; } .c-modal--ui__flow { flex-direction: column; margin-bottom: 20px; } .c-modal--ui__item { width: 100%; max-width: 400px; margin: auto; } .c-modal--ui__item img { width: 100%; } } /********************* c-table **********************/ .c-table, .c-table--th { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; font-size: 1.6rem; margin-bottom: 40px; } .c-table--fixed thead th:first-child, .c-table--fixed tbody th { position: sticky; left: 0; } .c-table--fixed thead th:not(:first-child), .c-table--fixed tbody td { z-index: -1; } .c-table td, .c-table--th td, .c-table th, .c-table--th th { border: 1px solid var(--gray); padding: 20px; border-collapse: collapse; } @-moz-document url-prefix() { .c-table td, .c-table--th td, .c-table th, .c-table--th th { background-clip: padding-box; /* firefox対策 */ } } .c-table thead th { background-color: var(--lt-beige); font-weight: 700; } .c-table--th thead th { background-color: var(--lt-gray); font-weight: 700; } .c-table tbody th, .c-table--th tbody th { text-align: left; } .c-table .c-table--blank { background-color: var(--white); border-top: none; border-left: none; border: none; } .c-table tbody th { background-color: var(--lt-gray); font-weight: 700; } .c-table--scroll { width: 100%; overflow-x: auto; } .c-table--scroll > .c-table, .c-table--scroll > .c-table--th { min-width: 700px; } .c-table__more-wrap { margin-bottom: 40px; } .c-table__more-item { position: relative; overflow: hidden; height: 330px; } .c-table__more-item:before { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 188px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%); content: ""; z-index: 1000; } .is-open .c-table__more-item:before { display: none; } .c-table__more-btn p { width: 224px; display: block; font-size: 16px; text-align: center; padding: 12px 0; margin: 0 auto; background: #FFF; border: 1px solid var(--gray); border-radius: 40px; position: relative; cursor: pointer; transition: all 0.5s; } .c-table__more-btn p:after { background-image: url(../img/ft/icon_arrow_down.svg); background-repeat: no-repeat; content: ""; width: 24px; height: 24px; position: absolute; } .c-table__more-wrap.is-open .c-table__more-btn p:after { transform: rotate(180deg); } .c-table__more-btn p:before { right: 26px; } .c-table__wrap { display: flex; } .c-table__wrap table { max-width: 48%; } .c-table__arrow01 { text-align: center; padding-bottom: 20px; } .c-table__arrow02 { padding: 40px 20px; } .c-table.c-table__unique { max-width: 243px; } .c-table.c-table__unique thead th { background: var(--lt-gray); } @media print { .c-table--scroll > .c-table, .c-table--scroll > .c-table--th { zoom: 0.5; min-width: auto; } .c-table--scroll > .c-table tr, .c-table--scroll > .c-table--th tr { page-break-inside: avoid; } } @media screen and (max-width: 767.9px) { .c-table td, .c-table--th td, .c-table th, .c-table--th th { padding: 16px; border-collapse: collapse; } .c-table--sp01 thead tr th { width: 100%; background-color: var(--lt-beige); border-bottom: none; } .c-table--sp02 tbody th, .c-table--sp02 tbody td { width: 100%; display: block; border-bottom: none; } .c-table__wrap .c-table.c-table--sp02 th, .c-table__wrap .c-table.c-table--sp02 td { border-bottom: none; } .c-table__wrap .c-table:last-child { border-bottom: 1px solid var(--gray); } .c-table--sp02 tbody tr:last-child { border-bottom: 1px solid var(--gray); } .c-table__wrap .c-table.c-table--sp02 tr:not(:last-child) td[rowspan] { border-bottom: 1px solid var(--gray); } .c-table--scroll { overflow-x: scroll; padding-bottom: 10px; width: 100%; } .c-table__wrap.c-table__unique-wrap { flex-direction: column; } .c-table.c-table__unique { width: 100%; max-width: 100%; } .c-table.c-table__unique:first-of-type { margin-bottom: 0; } .c-table__unique-wrap .c-table__arrow02 { text-align: center; padding: 0 0 20px 0; } .c-table__arrow01 img, .c-table__arrow02 img { width: 68px; } tr.u-fb-sp > *:first-of-type { border-right: none; } } /********************* c-info **********************/ .c-info { width: 100%; text-align: center; border: 1px solid var(--gray); border-radius: 10px; background: var(--lt-gray); margin-bottom: 40px; } .c-info p { font-size: 1.6rem; } .c-info h3 { font-size: 2rem; font-weight: 700; padding: 12px 0; } .c-info__box { background-color: var(--white); border-radius: 0 0 10px 10px; padding: 35px 0 57px; } .c-info__box h4 { display: inline-block; /* firefox対策*/ width: fit-content; font-size: 1.8rem; font-weight: 500; vertical-align: middle; margin: 0 auto; position: relative; padding: 0 0 16px 40px; } .c-info__box h4:before { display: block; content: ""; background-image: url(../img/ft/icon_info_tel.svg); background-size: contain; background-repeat: no-repeat; width: 30px; height: 30px; position: absolute; left: 0; top: 0; } .c-info__telbox { display: flex; justify-content: center; margin-bottom: 10px; } .c-info__telbox dt { font-size: 1.6rem; padding: 20px 38px 0 20px; } .c-info__telbox dd { flex-shrink: 0; } .c-info__telbox dd address { font-family: "Roboto", sans-serif; font-size: 4.8rem; color: var(--ncb-orange); font-weight: 500; letter-spacing: 2px; } .c-info__telbox + .c-info__telbox--note { margin-bottom: 6px; } .c-info--05 .c-info__telbox dd address, .c-info--06 .c-info__telbox dd address { font-family: "Roboto", sans-serif; font-size: 3.6rem; color: var(--ncb-orange); font-weight: 700; letter-spacing: 2px; } .c-info--05 .c-info__telbox dt, .c-info--06 .c-info__telbox dt { margin-bottom: 10px; } .c-info--02 { display: flex; justify-content: center; text-align: left; margin: 0 auto; max-width: 680px; } .c-info--02 h5 { flex-basis: 24%; border-right: 1px solid var(--gray); display: flex; align-items: center; padding-right: 20px; font-size: 1.6rem; } .c-info--02 .c-info__telbox { flex-basis: 76%; display: table; padding-left: 40px; padding-top: 14px; } .c-info--02:last-child { padding-top: 30px; } .c-info--02 .c-info__telbox dt { font-size: 1.6rem; padding: 0; } .c-info--02 .c-info__telbox dd { display: inline-block; font-size: 1.6rem; } .c-info__line { border-top: 1px solid var(--gray); margin: 30px 0; } .c-info__v-line { border-left: 1px solid var(--gray); /* margin: 0 30px; */ } .c-info--03, .c-info--05, .c-info--06 { display: flex; } .c-info__mail, .c-info__qa, .c-info--05 .c-info__contact, .c-info--06 .c-info__contact { width: 46%; flex-shrink: 0; flex-grow: 1; } .c-info__contact { width: 100%; } .c-info--03 .c-btn-cv { margin: 0 auto; } .c-info__mail h4, .c-info__qa h4, .c-info__contact h4 { width: fit-content; padding-left: 36px; padding-bottom: 16px; } .c-info__mail h4:before { display: block; content: ""; background-image: url(../img/ft/icon_info_mail.svg); background-repeat: no-repeat; position: absolute; width: 30px; height: 30px; left: 0; } .c-info__qa h4:before, .c-info__contact h4:before { display: block; content: ""; background-image: url(../img/ft/icon_info_qa.svg); background-repeat: no-repeat; position: absolute; width: 30px; height: 30px; left: 0; } .c-info--05 .c-btn, .c-info--05 .c-btn-cv { margin: 0 auto 16px; } .c-info--05 .c-info__telbox, .c-info--06 .c-info__telbox { display: block; } .c-info--05 .c-info__box h4, .c-info--06 .c-info__box h4 { width: fit-content; } .c-info__net > .c-btn-cv { width: 440px; margin: 0 auto; } .c-info__net > h4:before { display: block; background-image: url(../img/ft/icon_info_mail.svg); background-repeat: no-repeat; background-size: contain; width: 30px; height: 30px; position: absolute; left: 0; top: 0; } .c-info--05 .c-info__contact, .c-info--06 .c-info__contact { display: flex; flex-direction: column; align-items: center; } .c-info--05 .c-info__contact { justify-content: flex-start; } .c-info--06 .c-info__contact { justify-content: space-between; } .c-info--05 .c-info__contact h4, .c-info--06 .c-info__contact h4 { height: 3em; } .c-info--05 .c-info__contact:last-of-type h4:before, .c-info--06 .c-info__contact h4:before { background-image: url(../img/ft/icon_info_tel.svg); } .c-info__wrap { padding: 0 30px; } .c-info__wrap .c-info--02 h5 { border-right: 1px dashed #ACACAC; } .c-info__wrap .c-info__line--d { border-top: 1px dashed var(--gray); margin: 30px 0; } .c-info__wrap .c-info__line--d + .c-info--02 { margin-top: 30px; } .c-info__wrap .c-info--02 .c-info__telbox dd:nth-child(n+4) { margin-top: 5px; } .c-info__wrap .c-info__v-line { border-left: 1px dashed var(--gray); } .c-info__wrap .c-info--05 .c-info__contact, .c-info__wrap .c-info--06 .c-info__contact { justify-content: flex-start; } .c-info__wrap .c-info--05 .c-info__contact .c-text:nth-child(n+4), .c-info__wrap .c-info--06 .c-info__contact .c-text:nth-child(n+4) { margin-top: 5px; } @media screen and (max-width: 781.9px) { .c-info__telbox dt { padding-right: 20px; } } @media screen and (max-width: 767.9px) { .c-info { margin-bottom: 30px; } .c-info p { font-size: 1.4rem; } .c-info__box { font-size: 1.6rem; padding: 24px; } .c-info h3 { font-size: 1.8rem; } .c-info__box h4 { font-size: 1.6rem; padding-bottom: 20px; } .c-info__telbox { display: block; } .c-info__telbox dt { font-size: 1.6rem; padding: 0 0 6px 0; text-align: center; } .c-info__telbox dd address { font-size: 3.6rem; margin-bottom: 10px; } .c-info__telbox dd address a { color: var(--ncb-orange); text-decoration: none; } .c-info__telbox + .c-info__telbox--note { margin-bottom: 10px; } .c-info--02 { display: block; padding-top: 0; text-align: center; } .c-info--02 h5 { display: block; font-size: 1.5rem; border-right: none; position: relative; padding-right: 0; margin-bottom: 20px; } .c-info--02 h5::after { width: 90px; height: 2px; content: ""; position: absolute; right: 0; left: 0; margin: auto; bottom: -10px; background-color: var(--ncb-orange); } .c-info--02 .c-info__telbox, .c-info--05, .c-info--06 { display: block; padding-left: 0; text-align: center; } .c-info--02 .c-info__telbox dt { padding-top: 16px; margin-bottom: 5px; } .c-info--02 .c-info__telbox dd, .c-info--03, .c-info__contact, .c-info--05 .c-info__contact, .c-info--06 .c-info__contact { width: 100%; display: block; font-size: 1.4rem; } .c-info--02 .c-info__telbox dt { padding-top: 0; } .c-info--02:last-child { padding-top: 0; } .c-info__mail, .c-info__qa { width: 100%; padding-bottom: 26px; } .c-info__net > .c-btn-cv { width: 280px; height: auto; border-radius: 40px; } .c-info__net > h4:before { top: -2px; } .c-info__wrap { padding: 0; } .c-info__wrap .c-info__line--d { border-top: 1px dashed #ACACAC; } .c-info__wrap .c-info--02 h5 { border-right: none; } .c-info__wrap .c-info--02 .c-info__telbox dd:nth-child(n+4) { margin-top: 10px; } .c-info__wrap .c-info--05 .c-info__contact .c-text:nth-child(n+4), .c-info__wrap .c-info--06 .c-info__contact .c-text:nth-child(n+4) { margin-top: 10px; } } /********************* c-breadcrumb **********************/ .c-breadcrumb { max-width: 1100px; padding-left: 20px; margin: 25px auto 40px; line-height: 1.7em; } .c-breadcrumb__item { display: inline; position: relative; font-size: 14px; } .c-breadcrumb__item:not(:last-of-type) { margin-right: 8px; } .c-breadcrumb__item:not(:last-of-type)::after { display: inline-block; content: ""; width: 8px; height: 12px; background: url(../img/ft/icon_arrow_right_black.svg) center/contain no-repeat; margin-left: 8px; margin-bottom: -1px; } @media screen and (max-width: 767.9px) { .c-breadcrumb { margin: 5px auto 15px; padding-right: 20px; } .c-breadcrumb__item { font-size: 12px; } } /********************* c-tab **********************/ .c-tab { display: flex; align-items: flex-end; gap: 0 8px; border-bottom: 1px solid #DDD; } .c-tab__item { width: 100%; text-align: center; padding: 19px 0; background: var(--lt-gray); border-radius: 4px 4px 0 0; cursor: pointer; } .c-tab__text { display: block; color: var(--ncb-brown); font-size: 1.6rem; font-weight: 700; line-height: 1.25; } .c-tab__item img { width: 48px; } .c-tab__item.is-current { padding: 18px 0; background: #FFF; border-top: 5px solid var(--ncb-orange); border-left: 1px solid #DDD; border-right: 1px solid #DDD; border-bottom: 1px solid #FFF; margin-bottom: -1px; } .c-tab__item.is-current .c-tab__text { color: var(--ncb-orange); } .c-tab__item.is-current img { filter: invert(53%) sepia(33%) saturate(4847%) hue-rotate(4deg) brightness(98%) contrast(101%); } .c-tab__item.c-tab__item--2lines { padding: 9px 0; } .c-tab__item.c-tab__item--2lines.is-current { padding: 8px 0; } .c-tab--style03 .c-tab__item { width: auto; max-width: 100%; padding: 19px 20px; } .c-tab--style03 .c-tab__item.is-current { padding-top: 18px; padding-bottom: 18px; } .c-tab__box { padding-top: 20px; } .c-tab__content { display: none; } .c-tab__content.is-current { display: block; } @media screen and (max-width: 769.9px) { .c-tab { gap: 0 5px; } .c-tab__item { width: 100%; padding-top: 18px; } .c-tab__item.c-tab__item--2lines { padding: 10px 0; } .c-tab--style02 .c-tab__item { padding: 13px 0; } .c-tab--style02 .c-tab__item.is-current { padding: 12px 0; } .c-tab--style02 .c-tab__item.c-tab__item--2lines { padding: 4px 0; } .c-tab--style02 .c-tab__item.c-tab__item--2lines.is-current { padding-bottom: 3px; } .c-tab--style03 .c-tab__item { padding: 19px 15px 18px; } .c-tab--style03 .c-tab__item.is-current { padding-top: 18px; padding-bottom: 17px; } .c-tab__text { font-size: 1.3rem; line-height: 1.3; } .c-tab__item img { width: 26px; } } /********************* c-carousel **********************/ .c-carousel { width: 100%; max-width: 1200px; margin: 0 auto; } .c-carousel__slide { width: 100%; max-width: 1200px; margin: 0 auto; overflow: hidden; position: relative; z-index: 2; } .c-carousel-01__slide { border-radius: 30px 0 30px 0; } .c-carousel__image { width: 100%; } .c-carousel__image > * { width: 100%; } .c-carousel__arrow .slick-prev.slick-arrow:before, .c-carousel__arrow .slick-next.slick-arrow:before { content: ""; } .c-carousel__arrow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .c-carousel__slide--prev, .c-carousel__slide--next { background: transparent; position: absolute; top: 0; bottom: 0; margin: auto; border: none; z-index: 2; cursor: pointer; } .c-carousel__slide--prev { transform: rotate(180deg); } .c-carousel__slide--prev img, .c-carousel__slide--next img { width: 100%; } .slick-dots { position: initial !important; } .c-carousel__dots { padding: 10px 0; display: flex; justify-content: center; } .c-carousel__dots li { margin: auto 4px; background: #DDD; width: 40px; height: 2px; border-radius: 0; vertical-align: middle; } .c-carousel__dots li.slick-active { width: 40px; height: 2px; background: var(--ncb-orange); } .c-carousel__dots li button { display: none; } .c-carousel__switch { height: 12px; width: auto; cursor: pointer; margin-left: 12px; } .c-carousel__switch-icon { height: 100%; } .js-start .c-carousel__switch-icon--stop { display: none; } .js-stop .c-carousel__switch-icon--start { display: none; } .js-start .c-carousel__switch-icon--start { display: inline-block; } .c-carousel__dots-wrap { padding: 10px 0 0; display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; } .c-carousel-01__item { width: 90vw; max-width: 1200px; } .c-carousel-01__slide--prev, .c-carousel-01__slide--next { width: 66px; height: 66px; } .c-carousel-01__slide--prev { left: -33px; } .c-carousel-01__slide--next { right: -33px; } .c-carousel-02 { max-width: 1116px; } .c-carousel-03 { max-width: 744px; } .c-carousel-02__item, .c-carousel-03__item { width: 30%; max-width: 340px; border-radius: 30px 0 30px 0; overflow: hidden; margin: 0 14px; } .c-carousel-02__slide--prev, .c-carousel-02__slide--next, .c-carousel-03__slide--prev, .c-carousel-03__slide--next { width: 40px; height: 40px; top: 35%; bottom: auto; } .c-carousel-02__slide--prev, .c-carousel-03__slide--prev { left: -20px; } .c-carousel-02__slide--next, .c-carousel-03__slide--next { right: -20px; } .c-carousel.c-carousel-ui { width: 100%; margin: 0 auto; max-width: 730px; overflow: hidden; } .c-carousel.c-carousel-ui .slick-list { overflow: visible; } .c-carousel.c-carousel-ui .slick-track { display: flex; column-gap: 20px; } .c-carousel__slide.c-carousel-ui__slide { width: 335px; height: 100%; overflow: visible; } .c-carousel__item.c-carousel-ui__item { width: 335px; transition: all ease-in-out 0.3s; opacity: 0.2; } .c-carousel__item.c-carousel-ui__item.slick-current { opacity: 1; } .c-carousel__slide--prev.c-carousel-ui__slide--prev, .c-carousel__slide--next.c-carousel-ui__slide--next { width: 50px; z-index: 2; } .c-carousel.c-carousel-ui .slick-disabled { display: none !important; } .c-carousel__slide--prev.c-carousel-ui__slide--prev { left: -25px; } .c-carousel__slide--next.c-carousel-ui__slide--next { right: -25px; } .c-carousel-ui__dots.c-carousel__dots li { width: 14px; height: 14px; background: var(--beige); border-radius: 50%; margin: auto 5px; } .c-carousel-ui__dots.c-carousel__dots li.slick-active { width: 14px; height: 14px; background: var(--ncb-brown); } .c-carousel-ui__box { margin-bottom: 12px; } .c-carousel-ui__text { text-align: center; } .c-carousel-ui__text .c-carousel__num { color: var(--ncb-brown); font-size: 2rem; font-family: "Roboto", sans-serif; font-weight: bold; margin-bottom: 4px; } .c-carousel-ui__body { font-size: 1.6rem; line-height: 1.5; } .c-carousel--horizon { width: 100%; padding-bottom: 30px; } .c-carousel--horizon .scroll-hint-icon { top: calc(50% - 40px - 20px); } @media screen and (max-width: 1280px) { .c-carousel { width: 90%; } } @media screen and (max-width: 767.9px) { .c-carousel { width: 100%; margin-bottom: 25px; order: -3; } .c-carousel__slide { width: auto; max-width: 96%; } .c-carousel__switch { margin-left: 6px; } .c-carousel__arrow { display: none; } .c-carousel-02__item, .c-carousel-03__item { margin: 0; max-width: 100%; } .c-carousel.c-carousel-ui { width: 335px; max-width: 100%; overflow: visible; } .c-carousel__slide.c-carousel-ui__slide { overflow: visible; } .c-carousel.c-carousel-ui .slick-list { overflow: hidden; } .c-carousel__arrow.c-carousel-ui__arrow { display: block; } .c-carousel__slide--prev.c-carousel-ui__slide--prev { left: -10px; } .c-carousel__slide--next.c-carousel-ui__slide--next { right: -10px; } .c-carousel--horizon { padding-bottom: 25px; } } /********************* c-accordion **********************/ .c-accordion, .c-accordion--qa { margin-bottom: 20px; border: 1px solid var(--gray); border-radius: 4px; overflow: hidden; } .c-accordion__title { font-size: 1.6rem; font-weight: 700; line-height: 1.5; vertical-align: middle; padding: 20px 52px 20px 24px; display: flex; align-items: center; position: relative; cursor: pointer; } .c-accordion__title:after { background-image: url(../img/ft/icon_accordion_open.svg); background-repeat: no-repeat; content: ""; width: 24px; height: 24px; position: absolute; top: 0; bottom: 0; right: 24px; margin: auto; transition: transfrom 0.5s; } .c-accordion__title.is-open::after { background-image: url(../img/ft/icon_accordion_close.svg); } .c-accordion__content { display: none; padding: 20px 24px; } .c-accordion__title img { padding-right: 12px; } .c-accordion--qa > .c-accordion__title { margin-left: 24px; } .c-accordion--qa .c-text { font-size: 1.6rem; margin-bottom: 0; } .c-accordion--qa > .c-accordion__title::before { content: "Q"; display: block; font-family: "Roboto", sans-serif; font-size: 2rem; font-weight: 700; color: var(--ncb-orange); position: absolute; top: 16px; left: 0; } .c-accordion--qa > .c-accordion__title:after { top: 22px; bottom: auto; } @media screen and (max-width: 767.9px) { .c-accordion { margin-bottom: 12px; } .c-accordion__title { padding: 16px 42px 16px 20px; } .c-accordion__title:after { right: 10px; } .c-accordion__title img { width: 32px; margin-right: 10px; padding-right: 0; } .c-accordion__content { padding: 0 20px 16px; } .c-accordion--qa > .c-accordion__title { margin-left: 16px; padding: 16px 42px 16px 24px; } .c-accordion--qa > .c-accordion__title::before { top: 12px; } .c-accordion--qa > .c-accordion__title:after { top: 16px; } .c-accordion--qa > .c-accordion__content { padding-left: 16px; padding-right: 16px; } } /********************* c-flow **********************/ .c-flow { max-width: 730px; display: flex; justify-content: space-between; margin: 0 auto; } .c-flow__item { width: 25%; max-width: 200px; display: flex; flex-direction: column; align-items: center; flex: 1; } .c-flow__item { position: relative; } .c-flow__item:after { background-image: url(../img/ft/icon_step_arrow.svg); background-repeat: no-repeat; content: ""; width: 12px; height: 20px; position: absolute; top: 60px; right: -36px; margin: auto; transition: transfrom 0.5s; } .c-flow__item:last-child::after { background-image: none; } .c-flow__icon { background: var(--lt-gray); border-radius: 50%; width: 70%; height: auto; padding-top: 70%; display: block; order: 1; } .c-flow__icon img { width: 70%; height: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .c-flow__step { font-family: "Roboto", sans-serif; display: block; color: var(--ncb-orange); font-size: 1.6rem; font-weight: 700; text-align: center; margin-top: 15px; order: 2; } .c-flow__head { font-size: 1.8rem; font-weight: 700; text-align: center; order: 3; } .c-flow__item .c-text { margin-top: 16px; margin-bottom: 0; order: 4; } .c-flow--desc.c-flow { justify-content: center; column-gap: 65px; } .c-flow--4step .c-flow__item:after { right: -6px; } .c-flow--4step-desc { flex-direction: column; } .c-flow--4step-desc .c-flow__item { width: 100%; max-width: 100%; flex-direction: row-reverse; align-items: flex-start; justify-content: flex-end; } .c-flow--4step-desc .c-flow__item:not(:last-of-type) { margin-bottom: 40px; } .c-flow--4step-desc .c-flow__item:not(:last-of-type):after { display: inline-block; content: ""; width: 2px; height: calc(100% + 40px); /* background: url(../img/ft/img_flow_line.svg) center/cover no-repeat; */ background: #DDD; left: 46px; top: 46px; right: auto; z-index: -1; } .c-flow--4step-desc .c-flow__item:after { display: none; } .c-flow--4step-desc .c-flow__icon { width: 92px; height: 92px; flex-shrink: 0; padding-top: 0; } .c-flow--4step-desc .c-flow__icon img { width: 62px; height: 62px; } .c-flow--4step-desc .c-flow__text { margin-left: 24px; flex: 1; } .c-flow--4step-desc .c-flow__step, .c-flow--4step-desc .c-flow__head { text-align: left; } .c-flow--4step-desc .c-flow__item .c-text { margin-top: 12px; } .c-flow--4step-noicon .c-flow__item:not(:last-of-type):after { left: 0; top: 16px; } .c-flow--4step-noicon .c-flow__item { position: relative; } .c-flow--4step-noicon .c-flow__item:before { display: inline-block; content: ""; width: 16px; height: 16px; background: var(--ncb-orange); border-radius: 50%; position: absolute; left: -7px; top: 0; } .c-flow--4step-noicon .c-flow__step { margin-top: 0; } .c-flow--box { flex-direction: column; } .c-flow--box .c-flow__item { width: 100%; max-width: 100%; border: 1px solid var(--gray); border-radius: 4px; padding: 20px 30px; } .c-flow--box .c-flow__item:not(:last-of-type) { margin-bottom: 60px; } .c-flow--box .c-flow__item:not(:last-of-type):after { display: inline-block; content: ""; width: 80px; height: 24px; background: url(../img/ft/icon_arrow_stepbox.svg) center/contain no-repeat; position: absolute; left: 0; right: 0; top: auto; bottom: -44px; } .c-flow--box .c-flow__head { width: auto; font-size: 2rem; margin-bottom: 15px; text-align: center; order: 1; } .c-flow--box .c-flow__body { font-size: 1.6rem; line-height: 1.625; text-align: left; order: 2; } @media only screen and (max-width: 767.9px) { .c-flow { width: 100%; display: flex; flex-direction: column; } .c-flow__item { width: 100%; max-width: 100%; flex-direction: row; border: 1px solid var(--gray); border-radius: 4px; margin-bottom: 12px; justify-content: space-between; } .c-flow__step { width: 60px; text-align: left; margin-top: 0; padding-left: 12px; order: 1; } .c-flow__head { width: calc(100% - 140px); font-size: 1.6rem; text-align: left; padding-left: 12px; order: 2; } .c-flow__icon { width: 60px; height: 60px; padding-top: 0; background: none; margin-right: 12px; order: 3; } .c-flow__icon img { width: 60px; height: 60px; } .c-flow__item::after { display: none; } .c-flow.c-flow--desc .c-flow__item { flex-wrap: wrap; } .c-flow__item .c-text { flex-wrap: wrap; width: 100%; padding: 0 12px; margin-top: 5px; margin-bottom: 20px; } .c-flow--4step-desc .c-flow__item { border: none; } .c-flow--4step-desc .c-flow__item:not(:last-of-type) { margin-bottom: 30px; } .c-flow--4step-desc .c-flow__item:not(:last-of-type):after { height: calc(100% + 30px); left: 35px; top: 35px; } .c-flow--4step-desc .c-flow__icon { width: 70px; height: 70px; background: var(--lt-gray); padding-right: 0; } .c-flow--4step-desc .c-flow__icon img { width: 48px; height: 48px; } .c-flow--4step-desc .c-flow__text { margin-left: 12px; } .c-flow--4step-desc .c-flow__item .c-text { padding: 0; margin-top: 10px; margin-bottom: 0; } .c-flow--4step-desc .c-flow__head { font-size: 1.8rem; margin-top: 5px; } .c-flow--4step-desc .c-flow__step, .c-flow--4step-desc .c-flow__head { width: 100%; padding-left: 0; } .c-flow--4step-noicon .c-flow__item:not(:last-of-type):after { left: 0; top: 0; } .c-flow--4step-noicon .c-flow__text { margin-left: 28px; } .c-flow--box .c-flow__item { flex-direction: column; padding: 30px; } .c-flow--box .c-flow__item:not(:last-of-type) { margin-bottom: 48px; } .c-flow--box .c-flow__item:not(:last-of-type):after { width: 68px; height: 20px; bottom: -36px; } .c-flow--box .c-flow__head { padding-left: 0; } } /********************* c-new-flow **********************/ .c-new-flow { max-width: 730px; display: flex; justify-content: space-between; margin: 0 auto 40px; gap: 10px; } .c-new-flow__item { width: calc(25% - 7.5px); max-width: 200px; display: flex; flex-direction: column; align-items: center; flex: 1; } .c-new-flow__icon { background: var(--lt-beige); border-radius: 50%; width: clamp(85px, 70%, 120px); height: auto; padding-top: clamp(85px, 70%, 120px); display: block; margin-bottom: 10px; } .c-new-flow__item:not(:last-child) .c-new-flow__icon::after { content: ""; width: 100%; max-width: 90px; height: 3px; background: var(--beige); position: absolute; top: 0; bottom: 0; right: -40%; margin: auto; z-index: -1; } .c-new-flow__item:not(:last-child) .c-new-flow__icon::before { content: ""; width: 0; height: 0; border-style: solid; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #dbd1c1; border-right: 0; position: absolute; top: 0; bottom: 0; right: -42%; margin: auto; } .c-new-flow__icon img { width: clamp(50px, 60%, 70px); height: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .c-new-flow__step { width: 90px; height: 23px; line-height: 25px; font-family: "Roboto", sans-serif; display: block; color: var(--white); background: var(--ncb-orange); font-size: 1.4rem; font-weight: 700; text-align: center; margin-bottom: 10px; border-radius: 13px; } .c-new-flow__head { font-size: clamp(1.4rem, 0.25vw + 1.5rem, 1.8rem); font-weight: 700; text-align: center; margin-bottom: 15px; min-height: 50px; } .c-new-flow__head span { display: block; font-size: clamp(1.2rem, 0.25vw + 1.3rem, 1.4rem); } .c-new-flow__item .c-text { margin-bottom: 0; text-align: center; font-size: clamp(1.4rem, 0.25vw + 1.3rem, 1.6rem); } .c-new-flow--vertical { width: fit-content; flex-direction: column; gap: 40px; } .c-new-flow--vertical .c-new-flow__item { width: 100%; max-width: inherit; padding-left: 110px; align-items: flex-start; } .c-new-flow--vertical .c-new-flow__head { font-size: 1.8rem; min-height: auto; margin-bottom: 10px; text-align: left; } .c-new-flow--vertical .c-new-flow__head span { display: inline; font-size: 1.8rem; } .c-new-flow--vertical .c-new-flow__item .c-text { text-align: left; font-size: 1.6rem; } .c-new-flow--vertical .c-new-flow__icon { width: 90px; height: 90px; position: absolute; padding: 0; left: 0; top: 0; } .c-new-flow--vertical .c-new-flow__icon img { width: 60px; height: 60px; } .c-new-flow--vertical .c-new-flow__item:not(:last-child)::after { content: ""; width: 2px; height: calc(100% - 28px); background: var(--beige); position: absolute; left: 45px; bottom: -28px; margin: auto; z-index: -1; } .c-new-flow--vertical .c-new-flow__item:not(:last-child)::before { content: ""; width: 0; height: 0; border-style: solid; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 10px solid #dbd1c1; border-bottom: 0; position: absolute; left: 36px; bottom: -30px; margin: auto; } .c-new-flow--vertical .c-new-flow__item:not(:last-child) .c-new-flow__icon::after { display: none; } .c-new-flow--vertical .c-new-flow__item:not(:last-child) .c-new-flow__icon::before { display: none; } .c-new-flow--vertical-noicon .c-new-flow__step::before { content: ""; width: 25px; height: 25px; background: url(../img/ft/icon_new-flow--vertical-noicon.webp) no-repeat center/contain; position: absolute; top: 0; left: -38px; } .c-new-flow--vertical-noicon .c-new-flow__item { padding-left: 40px; } .c-new-flow--vertical-noicon .c-new-flow__item:not(:last-child)::before { left: 5px; } .c-new-flow--vertical-noicon .c-new-flow__item:not(:last-child)::after { height: 110%; left: 14px; } @media only screen and (max-width: 767.9px) { .c-new-flow { width: fit-content; flex-direction: column; gap: 40px; } .c-new-flow__item, .c-new-flow--vertical .c-new-flow__item { width: 100%; max-width: inherit; padding-left: 100px; align-items: flex-start; } .c-new-flow__head { font-size: 1.8rem; min-height: auto; margin-bottom: 10px; text-align: left; } .c-new-flow__head span { display: inline; font-size: 1.4rem; } .c-new-flow--vertical .c-new-flow__head span { display: inline; font-size: 1.4rem; } .c-new-flow__item .c-text { font-size: 1.6rem; text-align: left; } .c-new-flow__icon, .c-new-flow--vertical .c-new-flow__icon { width: 80px; height: 80px; position: absolute; padding: 0; left: 0; top: 0; } .c-new-flow__icon img, .c-new-flow--vertical .c-new-flow__icon img { width: 54px; height: 54px; } .c-new-flow__item:not(:last-child)::after, .c-new-flow--vertical .c-new-flow__item:not(:last-child)::after { content: ""; width: 2px; height: calc(100% - 28px); background: var(--beige); position: absolute; left: 40px; bottom: -28px; margin: auto; z-index: -1; } .c-new-flow__item:not(:last-child)::before, .c-new-flow--vertical .c-new-flow__item:not(:last-child)::before { content: ""; width: 0; height: 0; border-style: solid; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 10px solid #dbd1c1; border-bottom: 0; position: absolute; left: 31px; bottom: -30px; margin: auto; } .c-new-flow__item:not(:last-child) .c-new-flow__icon::after { display: none; } .c-new-flow__item:not(:last-child) .c-new-flow__icon::before { display: none; } .c-new-flow--vertical-noicon .c-new-flow__item { padding-left: 40px; } .c-new-flow--vertical-noicon .c-new-flow__item:not(:last-child)::before { left: 5px; } .c-new-flow--vertical-noicon .c-new-flow__item:not(:last-child)::after { height: 110%; left: 14px; } } /********************* c-news **********************/ .c-news { width: 100%; } .c-news__item { display: flex; align-items: flex-start; background-color: var(--lt-beige); border-radius: 10px; margin-bottom: 15px; border: none; padding: 22px 21px; } .c-news__title { display: flex; align-items: center; } .c-news__title--date { width: 106px; } .c-news__title--tag { font-size: 1.2rem; text-align: center; color: #666; border: 1px solid #F6AB00; border-radius: 20px; min-width: 120px; background: #FFF; height: 22px; line-height: 22px; margin-left: 14px; } .c-news__body { padding-right: 0; margin-left: 24px; } .c-news__body .c-news__body--link { display: block; font-weight: 400; font-feature-settings: "palt"; } @media screen and (min-width: 768px) { .c-news__body .c-news__body--link:hover { text-decoration: underline; } } @media screen and (max-width: 767.9px) { .c-news__item { flex-direction: column; align-items: flex-start; padding: 14px 21px 22px; } .c-news__title { margin-bottom: 11px; } .c-news__body { margin-left: 0; } } /********************* c-form **********************/ .c-form--text { width: 275px; color: var(--ncb-black); font-size: 1.6rem; line-height: 1.5; padding: 15px 12px; margin-bottom: 20px; border: 1px solid var(--gray); border-radius: 5px; } .c-form--text:focus { outline: none; border: 1px solid var(--ncb-orange); } .c-form--text::placeholder { color: #B5B5B5; } .c-form--select { width: 100%; color: var(--ncb-black); font-size: 1.6rem; line-height: 1.5; padding: 15px 12px; border: 1px solid var(--gray); border-radius: 5px; appearance: none; } .c-form--select:focus { outline: none; border: 1px solid var(--ncb-orange); } .c-form--select__wrap { width: 275px; margin-bottom: 20px; position: relative; } .c-form--select__wrap:after { display: inline-block; content: ""; width: 24px; height: 24px; background-color: #A6A6A6; -webkit-mask-image: url("../img/ft/icon_arrow_down.svg"); -webkit-mask-size: contain; mask-image: url("../img/ft/icon_arrow_down.svg"); mask-size: contain; position: absolute; right: 12px; top: 0; bottom: 0; margin: auto; } .c-form--check__item, .c-form--radio__item { width: 275px; color: var(--ncb-black); font-size: 1.6rem; line-height: 1.5; margin-bottom: 20px; border: 1px solid var(--gray); border-radius: 5px; position: relative; } .c-form--check__item.is-check, .c-form--radio__item.is-check { border: 1px solid var(--ncb-orange); } .c-form--check, .c-form--radio { display: none; } .c-form--check__item:before, .c-form--check__item:after, .c-form--radio__item:before, .c-form--radio__item:after { display: inline-block; content: ""; position: absolute; top: 0; bottom: 0; margin: auto; pointer-events: none; } .c-form--check__item:before, .c-form--radio__item:before { width: 16px; height: 16px; border: 1px solid var(--gray); left: 12px; } .c-form--check__item:before { border-radius: 2px; } .c-form--radio__item:before { border-radius: 50%; } .c-form--check__item.is-check:before { border: none; background: var(--ncb-orange); } .c-form--check__item.is-check:after { width: 10px; height: 7px; background: url(../img/ft/img_check_cont.svg) center/contain no-repeat; left: 15px; } .c-form--radio__item.is-check:before { border-color: var(--ncb-orange); } .c-form--radio__item.is-check:after { width: 10px; height: 10px; background: var(--ncb-orange); border-radius: 50%; left: 15px; } .c-form--check__label, .c-form--radio__label { display: inline-block; width: 100%; padding: 15px 12px 15px 38px; margin: 0 auto; cursor: pointer; } .c-form--check__list, .c-form--radio__list { display: flex; flex-wrap: wrap; column-gap: 20px; } /********************* Utility **********************/ /* ===================== disp ===================== */ @media only screen and (max-width: 767.9px) { .u-visible--pc { display: none !important; } } @media screen and (min-width: 768px), print { .u-visible--sp { display: none !important; } } /* ===================== text layout ===================== */ .u-align--left { text-align: left !important; } .u-align--center { text-align: center !important; } .u-align--right { text-align: right !important; } .u-align--pc-left, .u-align-pc--left { text-align: left !important; } .u-align--pc-center, .u-align-pc--center { text-align: center !important; } .u-align--pc-right, .u-align-pc--right { text-align: right !important; } @media only screen and (max-width: 767.9px) { .u-align--pc-left, .u-align--pc-center, .u-align--pc-right, .u-align-pc--left, .u-align-pc--center, .u-align-pc--right { text-align: inherit !important; } .u-align--sp-left, .u-align-sp--left { text-align: left !important; } .u-align--sp-center, .u-align-sp--center { text-align: center !important; } .u-align--sp-right, .u-align-sp--right { text-align: right !important; } } /* ===================== fc ===================== */ .u-fc--ncb-orange { color: var(--ncb-orange) !important; } .u-fc--ncb-blue { color: var(--ncb-blue) !important; } .u-fc--ncb-black { color: var(--ncb-black) !important; } .u-fc--ncb-yellow { color: var(--ncb-yellow) !important; } .u-fc--ncb-pink { color: var(--ncb-pink) !important; } .u-fc--ncb-green { color: var(--ncb-green) !important; } .u-fc--ncb-lt-blue { color: var(--ncb-Lt-blue) !important; } .u-fc--ncb-brown { color: var(--ncb-brown) !important; } .u-fc--ncb-red { color: var(--ncb-red) !important; } .u-fc--lt-blue-gray { color: var(--lt-blue-gray) !important; } .u-fc--blue-gray { color: var(--blue-gray) !important; } .u-fc--lt-beige { color: var(--lt-beige) !important; } .u-fc--beige { color: var(--beige) !important; } .u-fc--white { color: var(--white) !important; } .u-fc--gray { color: var(--gray) !important; } .u-fc--lt-orange { color: var(--lt-orange) !important; } .u-fc--lt-red { color: var(--lt-red) !important; } .u-fc--lt-gray { color: var(--lt-gray) !important; } /* ===================== bg ===================== */ .u-bg--ncb-orange { background-color: var(--ncb-orange) !important; } .u-bg--ncb-blue { background-color: var(--ncb-blue) !important; } .u-bg--ncb-black { background-color: var(--ncb-black) !important; } .u-bg--ncb-yellow { background-color: var(--ncb-yellow) !important; } .u-bg--ncb-pink { background-color: var(--ncb-pink) !important; } .u-bg--ncb-green { background-color: var(--ncb-green) !important; } .u-bg--ncb-lt-blue { background-color: var(--ncb-Lt-blue) !important; } .u-bg--ncb-brown { background-color: var(--ncb-brown) !important; } .u-bg--ncb-red { background-color: var(--ncb-red) !important; } .u-bg--lt-blue-gray { background-color: var(--lt-blue-gray) !important; } .u-bg--blue-gray { background-color: var(--blue-gray) !important; } .u-bg--lt-beige { background-color: var(--lt-beige) !important; } .u-bg--beige { background-color: var(--beige) !important; } .u-bg--white { background-color: var(--white) !important; } .u-bg--gray { background-color: var(--gray) !important; } .u-bg--lt-orange { background-color: var(--lt-orange) !important; } .u-bg--lt-red { background-color: var(--lt-red) !important; } .u-bg--lt-gray { background-color: var(--lt-gray) !important; } /* ===================== fs ===================== */ .u-fs-all--12 { font-size: 1.2rem !important; } .u-fs-all--13 { font-size: 1.3rem !important; } .u-fs-all--14 { font-size: 1.4rem !important; } .u-fs-all--15 { font-size: 1.5rem !important; } .u-fs-all--16 { font-size: 1.6rem !important; } .u-fs-all--17 { font-size: 1.7rem !important; } .u-fs-all--18 { font-size: 1.8rem !important; } .u-fs-all--19 { font-size: 1.9rem !important; } .u-fs-all--20 { font-size: 2rem !important; } .u-fs-all--21 { font-size: 2.1rem !important; } .u-fs-all--22 { font-size: 2.2rem !important; } .u-fs-all--23 { font-size: 2.3rem !important; } .u-fs-all--24 { font-size: 2.4rem !important; } .u-fs-all--25 { font-size: 2.5rem !important; } .u-fs-all--26 { font-size: 2.6rem !important; } .u-fs-all--27 { font-size: 2.7rem !important; } .u-fs-all--28 { font-size: 2.8rem !important; } .u-fs-all--29 { font-size: 2.9rem !important; } .u-fs-all--30 { font-size: 3rem !important; } .u-fs-all--31 { font-size: 3.1rem !important; } .u-fs-all--32 { font-size: 3.2rem !important; } .u-fs-all--33 { font-size: 3.3rem !important; } .u-fs-all--34 { font-size: 3.4rem !important; } .u-fs-all--35 { font-size: 3.5rem !important; } .u-fs-all--36 { font-size: 3.6rem !important; } @media only screen and (max-width: 767.9px) { .u-fs-sp--12 { font-size: 1.2rem !important; } .u-fs-sp--13 { font-size: 1.3rem !important; } .u-fs-sp--14 { font-size: 1.4rem !important; } .u-fs-sp--15 { font-size: 1.5rem !important; } .u-fs-sp--16 { font-size: 1.6rem !important; } .u-fs-sp--17 { font-size: 1.7rem !important; } .u-fs-sp--18 { font-size: 1.8rem !important; } .u-fs-sp--19 { font-size: 1.9rem !important; } .u-fs-sp--20 { font-size: 2rem !important; } .u-fs-sp--21 { font-size: 2.1rem !important; } .u-fs-sp--22 { font-size: 2.2rem !important; } .u-fs-sp--23 { font-size: 2.3rem !important; } .u-fs-sp--24 { font-size: 2.4rem !important; } .u-fs-sp--25 { font-size: 2.5rem !important; } .u-fs-sp--26 { font-size: 2.6rem !important; } .u-fs-sp--27 { font-size: 2.7rem !important; } .u-fs-sp--28 { font-size: 2.8rem !important; } .u-fs-sp--29 { font-size: 2.9rem !important; } .u-fs-sp--30 { font-size: 3rem !important; } .u-fs-sp--31 { font-size: 3.1rem !important; } .u-fs-sp--32 { font-size: 3.2rem !important; } .u-fs-sp--33 { font-size: 3.3rem !important; } .u-fs-sp--34 { font-size: 3.4rem !important; } .u-fs-sp--35 { font-size: 3.5rem !important; } .u-fs-sp--36 { font-size: 3.6rem !important; } } @media screen and (min-width: 768px) { .u-fs-pc--12 { font-size: 1.2rem !important; } .u-fs-pc--13 { font-size: 1.3rem !important; } .u-fs-pc--14 { font-size: 1.4rem !important; } .u-fs-pc--15 { font-size: 1.5rem !important; } .u-fs-pc--16 { font-size: 1.6rem !important; } .u-fs-pc--17 { font-size: 1.7rem !important; } .u-fs-pc--18 { font-size: 1.8rem !important; } .u-fs-pc--19 { font-size: 1.9rem !important; } .u-fs-pc--20 { font-size: 2rem !important; } .u-fs-pc--21 { font-size: 2.1rem !important; } .u-fs-pc--22 { font-size: 2.2rem !important; } .u-fs-pc--23 { font-size: 2.3rem !important; } .u-fs-pc--24 { font-size: 2.4rem !important; } .u-fs-pc--25 { font-size: 2.5rem !important; } .u-fs-pc--26 { font-size: 2.6rem !important; } .u-fs-pc--27 { font-size: 2.7rem !important; } .u-fs-pc--28 { font-size: 2.8rem !important; } .u-fs-pc--29 { font-size: 2.9rem !important; } .u-fs-pc--30 { font-size: 3rem !important; } .u-fs-pc--31 { font-size: 3.1rem !important; } .u-fs-pc--32 { font-size: 3.2rem !important; } .u-fs-pc--33 { font-size: 3.3rem !important; } .u-fs-pc--34 { font-size: 3.4rem !important; } .u-fs-pc--35 { font-size: 3.5rem !important; } .u-fs-pc--36 { font-size: 3.6rem !important; } } /* ===================== mg ===================== */ .u-mg-auto { /* 要素中央寄せ */ margin: 0 auto !important; } .u-mg-all--0 { margin: 0 !important; } .u-mg-tb-all--0 { margin-top: 0 !important; margin-bottom: 0 !important; } .u-mg-tb-all--10 { margin-top: 10px !important; margin-bottom: 10px !important; } .u-mg-tb-all--20 { margin-top: 20px !important; margin-bottom: 20px !important; } .u-mg-tb-all--30 { margin-top: 30px !important; margin-bottom: 30px !important; } .u-mg-tb-all--40 { margin-top: 40px !important; margin-bottom: 40px !important; } .u-mg-tb-all--50 { margin-top: 50px !important; margin-bottom: 50px !important; } .u-mg-tb-all--60 { margin-top: 60px !important; margin-bottom: 60px !important; } .u-mg-tb-all--70 { margin-top: 70px !important; margin-bottom: 70px !important; } .u-mg-tb-all--80 { margin-top: 80px !important; margin-bottom: 80px !important; } .u-mg-tb-all--90 { margin-top: 90px !important; margin-bottom: 90px !important; } .u-mg-tb-all--100 { margin-top: 100px !important; margin-bottom: 100px !important; } .u-mg-rl-all--0 { margin-right: 0 !important; margin-left: 0 !important; } .u-mg-rl-all--10 { margin-right: 10px !important; margin-left: 10px !important; } .u-mg-rl-all--20 { margin-right: 20px !important; margin-left: 20px !important; } .u-mg-rl-all--30 { margin-right: 30px !important; margin-left: 30px !important; } .u-mg-rl-all--40 { margin-right: 40px !important; margin-left: 40px !important; } .u-mg-rl-all--50 { margin-right: 50px !important; margin-left: 50px !important; } .u-mg-rl-all--60 { margin-right: 60px !important; margin-left: 60px !important; } .u-mg-rl-all--70 { margin-right: 70px !important; margin-left: 70px !important; } .u-mg-rl-all--80 { margin-right: 80px !important; margin-left: 80px !important; } .u-mg-rl-all--90 { margin-right: 90px !important; margin-left: 90px !important; } .u-mg-rl-all--100 { margin-right: 100px !important; margin-left: 100px !important; } @media screen and (min-width: 768px), print { .u-mg-pc--0 { margin: 0 !important; } .u-mg-pc--auto { margin: 0 auto !important; } .u-mg-tb-pc--0 { margin-top: 0 !important; margin-bottom: 0 !important; } .u-mg-tb-pc--10 { margin-top: 10px !important; margin-bottom: 10px !important; } .u-mg-tb-pc--20 { margin-top: 20px !important; margin-bottom: 20px !important; } .u-mg-tb-pc--30 { margin-top: 30px !important; margin-bottom: 30px !important; } .u-mg-tb-pc--40 { margin-top: 40px !important; margin-bottom: 40px !important; } .u-mg-tb-pc--50 { margin-top: 50px !important; margin-bottom: 50px !important; } .u-mg-tb-pc--60 { margin-top: 60px !important; margin-bottom: 60px !important; } .u-mg-tb-pc--70 { margin-top: 70px !important; margin-bottom: 70px !important; } .u-mg-tb-pc--80 { margin-top: 80px !important; margin-bottom: 80px !important; } .u-mg-tb-pc--90 { margin-top: 90px !important; margin-bottom: 90px !important; } .u-mg-tb-pc--100 { margin-top: 100px !important; margin-bottom: 100px !important; } .u-mg-rl-pc--0 { margin-right: 0 !important; margin-left: 0 !important; } .u-mg-rl-pc--10 { margin-right: 10px !important; margin-left: 10px !important; } .u-mg-rl-pc--20 { margin-right: 20px !important; margin-left: 20px !important; } .u-mg-rl-pc--30 { margin-right: 30px !important; margin-left: 30px !important; } .u-mg-rl-pc--40 { margin-right: 40px !important; margin-left: 40px !important; } .u-mg-rl-pc--50 { margin-right: 50px !important; margin-left: 50px !important; } .u-mg-rl-pc--60 { margin-right: 60px !important; margin-left: 60px !important; } .u-mg-rl-pc--70 { margin-right: 70px !important; margin-left: 70px !important; } .u-mg-rl-pc--80 { margin-right: 80px !important; margin-left: 80px !important; } .u-mg-rl-pc--90 { margin-right: 90px !important; margin-left: 90px !important; } .u-mg-rl-pc--100 { margin-right: 100px !important; margin-left: 100px !important; } } @media screen and (max-width: 767.9px) { .u-mg-sp--0 { margin: 0 !important; } .u-mg-sp--auto { margin: 0 auto !important; } .u-mg-tb-sp--0 { margin-top: 0 !important; margin-bottom: 0 !important; } .u-mg-tb-sp--10 { margin-top: 10px !important; margin-bottom: 10px !important; } .u-mg-tb-sp--20 { margin-top: 20px !important; margin-bottom: 20px !important; } .u-mg-tb-sp--30 { margin-top: 30px !important; margin-bottom: 30px !important; } .u-mg-tb-sp--40 { margin-top: 40px !important; margin-bottom: 40px !important; } .u-mg-tb-sp--50 { margin-top: 50px !important; margin-bottom: 50px !important; } .u-mg-tb-sp--60 { margin-top: 60px !important; margin-bottom: 60px !important; } .u-mg-tb-sp--70 { margin-top: 70px !important; margin-bottom: 70px !important; } .u-mg-tb-sp--80 { margin-top: 80px !important; margin-bottom: 80px !important; } .u-mg-tb-sp--90 { margin-top: 90px !important; margin-bottom: 90px !important; } .u-mg-tb-sp--100 { margin-top: 100px !important; margin-bottom: 100px !important; } .u-mg-rl-sp--0 { margin-right: 0 !important; margin-left: 0 !important; } .u-mg-rl-sp--10 { margin-right: 10px !important; margin-left: 10px !important; } .u-mg-rl-sp--20 { margin-right: 20px !important; margin-left: 20px !important; } .u-mg-rl-sp--30 { margin-right: 30px !important; margin-left: 30px !important; } .u-mg-rl-sp--40 { margin-right: 40px !important; margin-left: 40px !important; } .u-mg-rl-sp--50 { margin-right: 50px !important; margin-left: 50px !important; } .u-mg-rl-sp--60 { margin-right: 60px !important; margin-left: 60px !important; } .u-mg-rl-sp--70 { margin-right: 70px !important; margin-left: 70px !important; } .u-mg-rl-sp--80 { margin-right: 80px !important; margin-left: 80px !important; } .u-mg-rl-sp--90 { margin-right: 90px !important; margin-left: 90px !important; } .u-mg-rl-sp--100 { margin-right: 100px !important; margin-left: 100px !important; } } /* ===================== mb ===================== */ .u-mb-all--0 { margin-bottom: 0 !important; } .u-mb-all--5 { margin-bottom: 5px !important; } .u-mb-all--10 { margin-bottom: 10px !important; } .u-mb-all--15 { margin-bottom: 15px !important; } .u-mb-all--20 { margin-bottom: 20px !important; } .u-mb-all--25 { margin-bottom: 25px !important; } .u-mb-all--30 { margin-bottom: 30px !important; } .u-mb-all--35 { margin-bottom: 35px !important; } .u-mb-all--40 { margin-bottom: 40px !important; } .u-mb-all--45 { margin-bottom: 45px !important; } .u-mb-all--50 { margin-bottom: 50px !important; } .u-mb-all--55 { margin-bottom: 55px !important; } .u-mb-all--60 { margin-bottom: 60px !important; } .u-mb-all--65 { margin-bottom: 65px !important; } .u-mb-all--70 { margin-bottom: 70px !important; } .u-mb-all--75 { margin-bottom: 75px !important; } .u-mb-all--80 { margin-bottom: 80px !important; } .u-mb-all--85 { margin-bottom: 85px !important; } .u-mb-all--90 { margin-bottom: 90px !important; } .u-mb-all--95 { margin-bottom: 95px !important; } .u-mb-all--100 { margin-bottom: 100px !important; } @media screen and (max-width: 767.9px) { .u-mb-sp--0 { margin-bottom: 0 !important; } .u-mb-sp--5 { margin-bottom: 5px !important; } .u-mb-sp--10 { margin-bottom: 10px !important; } .u-mb-sp--15 { margin-bottom: 15px !important; } .u-mb-sp--20 { margin-bottom: 20px !important; } .u-mb-sp--25 { margin-bottom: 25px !important; } .u-mb-sp--30 { margin-bottom: 30px !important; } .u-mb-sp--35 { margin-bottom: 35px !important; } .u-mb-sp--40 { margin-bottom: 40px !important; } .u-mb-sp--45 { margin-bottom: 45px !important; } .u-mb-sp--50 { margin-bottom: 50px !important; } .u-mb-sp--55 { margin-bottom: 55px !important; } .u-mb-sp--60 { margin-bottom: 60px !important; } .u-mb-sp--65 { margin-bottom: 65px !important; } .u-mb-sp--70 { margin-bottom: 70px !important; } .u-mb-sp--75 { margin-bottom: 75px !important; } .u-mb-sp--80 { margin-bottom: 80px !important; } .u-mb-sp--85 { margin-bottom: 85px !important; } .u-mb-sp--90 { margin-bottom: 90px !important; } .u-mb-sp--95 { margin-bottom: 95px !important; } .u-mb-sp--100 { margin-bottom: 100px !important; } } @media screen and (min-width: 768px), print { .u-mb-pc--0 { margin-bottom: 0 !important; } .u-mb-pc--5 { margin-bottom: 5px !important; } .u-mb-pc--10 { margin-bottom: 10px !important; } .u-mb-pc--15 { margin-bottom: 15px !important; } .u-mb-pc--20 { margin-bottom: 20px !important; } .u-mb-pc--25 { margin-bottom: 25px !important; } .u-mb-pc--30 { margin-bottom: 30px !important; } .u-mb-pc--35 { margin-bottom: 35px !important; } .u-mb-pc--40 { margin-bottom: 40px !important; } .u-mb-pc--45 { margin-bottom: 45px !important; } .u-mb-pc--50 { margin-bottom: 50px !important; } .u-mb-pc--55 { margin-bottom: 55px !important; } .u-mb-pc--60 { margin-bottom: 60px !important; } .u-mb-pc--65 { margin-bottom: 65px !important; } .u-mb-pc--70 { margin-bottom: 70px !important; } .u-mb-pc--75 { margin-bottom: 75px !important; } .u-mb-pc--80 { margin-bottom: 80px !important; } .u-mb-pc--85 { margin-bottom: 85px !important; } .u-mb-pc--90 { margin-bottom: 90px !important; } .u-mb-pc--95 { margin-bottom: 95px !important; } .u-mb-pc--100 { margin-bottom: 100px !important; } } /* ===================== ml ===================== */ .u-ml-all--0 { margin-left: 0 !important; } .u-ml-all--5 { margin-left: 5px !important; } .u-ml-all--10 { margin-left: 10px !important; } .u-ml-all--15 { margin-left: 15px !important; } .u-ml-all--20 { margin-left: 20px !important; } .u-ml-all--25 { margin-left: 25px !important; } .u-ml-all--30 { margin-left: 30px !important; } .u-ml-all--35 { margin-left: 35px !important; } .u-ml-all--40 { margin-left: 40px !important; } .u-ml-all--45 { margin-left: 45px !important; } .u-ml-all--50 { margin-left: 50px !important; } .u-ml-all--55 { margin-left: 55px !important; } .u-ml-all--60 { margin-left: 60px !important; } .u-ml-all--65 { margin-left: 65px !important; } .u-ml-all--70 { margin-left: 70px !important; } .u-ml-all--75 { margin-left: 75px !important; } .u-ml-all--80 { margin-left: 80px !important; } .u-ml-all--85 { margin-left: 85px !important; } .u-ml-all--90 { margin-left: 90px !important; } .u-ml-all--95 { margin-left: 95px !important; } .u-ml-all--100 { margin-left: 100px !important; } @media screen and (max-width: 767.9px) { .u-ml-sp--0 { margin-left: 0 !important; } .u-ml-sp--5 { margin-left: 5px !important; } .u-ml-sp--10 { margin-left: 10px !important; } .u-ml-sp--15 { margin-left: 15px !important; } .u-ml-sp--20 { margin-left: 20px !important; } .u-ml-sp--25 { margin-left: 25px !important; } .u-ml-sp--30 { margin-left: 30px !important; } .u-ml-sp--35 { margin-left: 35px !important; } .u-ml-sp--40 { margin-left: 40px !important; } .u-ml-sp--45 { margin-left: 45px !important; } .u-ml-sp--50 { margin-left: 50px !important; } .u-ml-sp--55 { margin-left: 55px !important; } .u-ml-sp--60 { margin-left: 60px !important; } .u-ml-sp--65 { margin-left: 65px !important; } .u-ml-sp--70 { margin-left: 70px !important; } .u-ml-sp--75 { margin-left: 75px !important; } .u-ml-sp--80 { margin-left: 80px !important; } .u-ml-sp--85 { margin-left: 85px !important; } .u-ml-sp--90 { margin-left: 90px !important; } .u-ml-sp--95 { margin-left: 95px !important; } .u-ml-sp--100 { margin-left: 100px !important; } } @media screen and (min-width: 768px), print { .u-ml-pc--0 { margin-left: 0 !important; } .u-ml-pc--5 { margin-left: 5px !important; } .u-ml-pc--10 { margin-left: 10px !important; } .u-ml-pc--15 { margin-left: 15px !important; } .u-ml-pc--20 { margin-left: 20px !important; } .u-ml-pc--25 { margin-left: 25px !important; } .u-ml-pc--30 { margin-left: 30px !important; } .u-ml-pc--35 { margin-left: 35px !important; } .u-ml-pc--40 { margin-left: 40px !important; } .u-ml-pc--45 { margin-left: 45px !important; } .u-ml-pc--50 { margin-left: 50px !important; } .u-ml-pc--55 { margin-left: 55px !important; } .u-ml-pc--60 { margin-left: 60px !important; } .u-ml-pc--65 { margin-left: 65px !important; } .u-ml-pc--70 { margin-left: 70px !important; } .u-ml-pc--75 { margin-left: 75px !important; } .u-ml-pc--80 { margin-left: 80px !important; } .u-ml-pc--85 { margin-left: 85px !important; } .u-ml-pc--90 { margin-left: 90px !important; } .u-ml-pc--95 { margin-left: 95px !important; } .u-ml-pc--100 { margin-left: 100px !important; } } /* ===================== mr ===================== */ .u-mr-all--0 { margin-right: 0 !important; } .u-mr-all--5 { margin-right: 5px !important; } .u-mr-all--10 { margin-right: 10px !important; } .u-mr-all--15 { margin-right: 15px !important; } .u-mr-all--20 { margin-right: 20px !important; } .u-mr-all--25 { margin-right: 25px !important; } .u-mr-all--30 { margin-right: 30px !important; } .u-mr-all--35 { margin-right: 35px !important; } .u-mr-all--40 { margin-right: 40px !important; } .u-mr-all--45 { margin-right: 45px !important; } .u-mr-all--50 { margin-right: 50px !important; } .u-mr-all--55 { margin-right: 55px !important; } .u-mr-all--60 { margin-right: 60px !important; } .u-mr-all--65 { margin-right: 65px !important; } .u-mr-all--70 { margin-right: 70px !important; } .u-mr-all--75 { margin-right: 75px !important; } .u-mr-all--80 { margin-right: 80px !important; } .u-mr-all--85 { margin-right: 85px !important; } .u-mr-all--90 { margin-right: 90px !important; } .u-mr-all--95 { margin-right: 95px !important; } .u-mr-all--100 { margin-right: 100px !important; } @media screen and (max-width: 767.9px) { .u-mr-sp--0 { margin-right: 0 !important; } .u-mr-sp--5 { margin-right: 5px !important; } .u-mr-sp--10 { margin-right: 10px !important; } .u-mr-sp--15 { margin-right: 15px !important; } .u-mr-sp--20 { margin-right: 20px !important; } .u-mr-sp--25 { margin-right: 25px !important; } .u-mr-sp--30 { margin-right: 30px !important; } .u-mr-sp--35 { margin-right: 35px !important; } .u-mr-sp--40 { margin-right: 40px !important; } .u-mr-sp--45 { margin-right: 45px !important; } .u-mr-sp--50 { margin-right: 50px !important; } .u-mr-sp--55 { margin-right: 55px !important; } .u-mr-sp--60 { margin-right: 60px !important; } .u-mr-sp--65 { margin-right: 65px !important; } .u-mr-sp--70 { margin-right: 70px !important; } .u-mr-sp--75 { margin-right: 75px !important; } .u-mr-sp--80 { margin-right: 80px !important; } .u-mr-sp--85 { margin-right: 85px !important; } .u-mr-sp--90 { margin-right: 90px !important; } .u-mr-sp--95 { margin-right: 95px !important; } .u-mr-sp--100 { margin-right: 100px !important; } } @media screen and (min-width: 768px), print { .u-mr-pc--0 { margin-right: 0 !important; } .u-mr-pc--5 { margin-right: 5px !important; } .u-mr-pc--10 { margin-right: 10px !important; } .u-mr-pc--15 { margin-right: 15px !important; } .u-mr-pc--20 { margin-right: 20px !important; } .u-mr-pc--25 { margin-right: 25px !important; } .u-mr-pc--30 { margin-right: 30px !important; } .u-mr-pc--35 { margin-right: 35px !important; } .u-mr-pc--40 { margin-right: 40px !important; } .u-mr-pc--45 { margin-right: 45px !important; } .u-mr-pc--50 { margin-right: 50px !important; } .u-mr-pc--55 { margin-right: 55px !important; } .u-mr-pc--60 { margin-right: 60px !important; } .u-mr-pc--65 { margin-right: 65px !important; } .u-mr-pc--70 { margin-right: 70px !important; } .u-mr-pc--75 { margin-right: 75px !important; } .u-mr-pc--80 { margin-right: 80px !important; } .u-mr-pc--85 { margin-right: 85px !important; } .u-mr-pc--90 { margin-right: 90px !important; } .u-mr-pc--95 { margin-right: 95px !important; } .u-mr-pc--100 { margin-right: 100px !important; } } /* ===================== mt ===================== */ .u-mt-all--0 { margin-top: 0 !important; } .u-mt-all--5 { margin-top: 5px !important; } .u-mt-all--10 { margin-top: 10px !important; } .u-mt-all--15 { margin-top: 15px !important; } .u-mt-all--20 { margin-top: 20px !important; } .u-mt-all--25 { margin-top: 25px !important; } .u-mt-all--30 { margin-top: 30px !important; } .u-mt-all--35 { margin-top: 35px !important; } .u-mt-all--40 { margin-top: 40px !important; } .u-mt-all--45 { margin-top: 45px !important; } .u-mt-all--50 { margin-top: 50px !important; } .u-mt-all--55 { margin-top: 55px !important; } .u-mt-all--60 { margin-top: 60px !important; } .u-mt-all--65 { margin-top: 65px !important; } .u-mt-all--70 { margin-top: 70px !important; } .u-mt-all--75 { margin-top: 75px !important; } .u-mt-all--80 { margin-top: 80px !important; } .u-mt-all--85 { margin-top: 85px !important; } .u-mt-all--90 { margin-top: 90px !important; } .u-mt-all--95 { margin-top: 95px !important; } .u-mt-all--100 { margin-top: 100px !important; } @media screen and (max-width: 767.9px) { .u-mt-sp--0 { margin-top: 0 !important; } .u-mt-sp--5 { margin-top: 5px !important; } .u-mt-sp--10 { margin-top: 10px !important; } .u-mt-sp--15 { margin-top: 15px !important; } .u-mt-sp--20 { margin-top: 20px !important; } .u-mt-sp--25 { margin-top: 25px !important; } .u-mt-sp--30 { margin-top: 30px !important; } .u-mt-sp--35 { margin-top: 35px !important; } .u-mt-sp--40 { margin-top: 40px !important; } .u-mt-sp--45 { margin-top: 45px !important; } .u-mt-sp--50 { margin-top: 50px !important; } .u-mt-sp--55 { margin-top: 55px !important; } .u-mt-sp--60 { margin-top: 60px !important; } .u-mt-sp--65 { margin-top: 65px !important; } .u-mt-sp--70 { margin-top: 70px !important; } .u-mt-sp--75 { margin-top: 75px !important; } .u-mt-sp--80 { margin-top: 80px !important; } .u-mt-sp--85 { margin-top: 85px !important; } .u-mt-sp--90 { margin-top: 90px !important; } .u-mt-sp--95 { margin-top: 95px !important; } .u-mt-sp--100 { margin-top: 100px !important; } } @media screen and (min-width: 768px), print { .u-mt-pc--0 { margin-top: 0 !important; } .u-mt-pc--5 { margin-top: 5px !important; } .u-mt-pc--10 { margin-top: 10px !important; } .u-mt-pc--15 { margin-top: 15px !important; } .u-mt-pc--20 { margin-top: 20px !important; } .u-mt-pc--25 { margin-top: 25px !important; } .u-mt-pc--30 { margin-top: 30px !important; } .u-mt-pc--35 { margin-top: 35px !important; } .u-mt-pc--40 { margin-top: 40px !important; } .u-mt-pc--45 { margin-top: 45px !important; } .u-mt-pc--50 { margin-top: 50px !important; } .u-mt-pc--55 { margin-top: 55px !important; } .u-mt-pc--60 { margin-top: 60px !important; } .u-mt-pc--65 { margin-top: 65px !important; } .u-mt-pc--70 { margin-top: 70px !important; } .u-mt-pc--75 { margin-top: 75px !important; } .u-mt-pc--80 { margin-top: 80px !important; } .u-mt-pc--85 { margin-top: 85px !important; } .u-mt-pc--90 { margin-top: 90px !important; } .u-mt-pc--95 { margin-top: 95px !important; } .u-mt-pc--100 { margin-top: 100px !important; } } /* ===================== pg ===================== */ .u-pg-all--0 { padding: 0 !important; } @media screen and (min-width: 768px), print { .u-pg-pc--0 { padding: 0 !important; } } @media screen and (max-width: 767.9px) { .u-pg-sp--0 { padding: 0 !important; } } /* ===================== pb ===================== */ .u-pb-all--0 { padding-bottom: 0 !important; } .u-pb-all--10 { padding-bottom: 10px !important; } .u-pb-all--20 { padding-bottom: 20px !important; } .u-pb-all--30 { padding-bottom: 30px !important; } .u-pb-all--40 { padding-bottom: 40px !important; } .u-pb-all--50 { padding-bottom: 50px !important; } .u-pb-all--60 { padding-bottom: 60px !important; } .u-pb-all--70 { padding-bottom: 70px !important; } .u-pb-all--80 { padding-bottom: 80px !important; } .u-pb-all--90 { padding-bottom: 90px !important; } .u-pb-all--100 { padding-bottom: 100px !important; } @media screen and (max-width: 767.9px) { .u-pb-sp--0 { padding-bottom: 0 !important; } .u-pb-sp--10 { padding-bottom: 10px !important; } .u-pb-sp--20 { padding-bottom: 20px !important; } .u-pb-sp--30 { padding-bottom: 30px !important; } .u-pb-sp--40 { padding-bottom: 40px !important; } .u-pb-sp--50 { padding-bottom: 50px !important; } .u-pb-sp--60 { padding-bottom: 60px !important; } .u-pb-sp--70 { padding-bottom: 70px !important; } .u-pb-sp--80 { padding-bottom: 80px !important; } .u-pb-sp--90 { padding-bottom: 90px !important; } .u-pb-sp--100 { padding-bottom: 100px !important; } } @media screen and (min-width: 768px), print { .u-pb-pc--0 { padding-bottom: 0 !important; } .u-pb-pc--10 { padding-bottom: 10px !important; } .u-pb-pc--20 { padding-bottom: 20px !important; } .u-pb-pc--30 { padding-bottom: 30px !important; } .u-pb-pc--40 { padding-bottom: 40px !important; } .u-pb-pc--50 { padding-bottom: 50px !important; } .u-pb-pc--60 { padding-bottom: 60px !important; } .u-pb-pc--70 { padding-bottom: 70px !important; } .u-pb-pc--80 { padding-bottom: 80px !important; } .u-pb-pc--90 { padding-bottom: 90px !important; } .u-pb-pc--100 { padding-bottom: 100px !important; } } /* ===================== pd ===================== */ .u-pd-all--0 { padding: 0 !important; } .u-pd-all--10 { padding: 10px !important; } .u-pd-all--20 { padding: 20px !important; } .u-pd-all--30 { padding: 30px !important; } .u-pd-all--40 { padding: 40px !important; } .u-pd-all--50 { padding: 50px !important; } .u-pd-all--60 { padding: 60px !important; } .u-pd-all--70 { padding: 70px !important; } .u-pd-all--80 { padding: 80px !important; } .u-pd-all--90 { padding: 90px !important; } .u-pd-all--100 { padding: 100px !important; } .u-pd-tb-all--0 { padding-top: 0 !important; padding-bottom: 0 !important; } .u-pd-tb-all--10 { padding-top: 10px !important; padding-bottom: 10px !important; } .u-pd-tb-all--20 { padding-top: 20px !important; padding-bottom: 20px !important; } .u-pd-tb-all--30 { padding-top: 30px !important; padding-bottom: 30px !important; } .u-pd-tb-all--40 { padding-top: 40px !important; padding-bottom: 40px !important; } .u-pd-tb-all--50 { padding-top: 50px !important; padding-bottom: 50px !important; } .u-pd-tb-all--60 { padding-top: 60px !important; padding-bottom: 60px !important; } .u-pd-tb-all--70 { padding-top: 70px !important; padding-bottom: 70px !important; } .u-pd-tb-all--80 { padding-top: 80px !important; padding-bottom: 80px !important; } .u-pd-tb-all--90 { padding-top: 90px !important; padding-bottom: 90px !important; } .u-pd-tb-all--100 { padding-top: 100px !important; padding-bottom: 100px !important; } .u-pd-rl-all--0 { padding-right: 0 !important; padding-left: 0 !important; } .u-pd-rl-all--10 { padding-right: 10px !important; padding-left: 10px !important; } .u-pd-rl-all--20 { padding-right: 20px !important; padding-left: 20px !important; } .u-pd-rl-all--30 { padding-right: 30px !important; padding-left: 30px !important; } .u-pd-rl-all--40 { padding-right: 40px !important; padding-left: 40px !important; } .u-pd-rl-all--50 { padding-right: 50px !important; padding-left: 50px !important; } .u-pd-rl-all--60 { padding-right: 60px !important; padding-left: 60px !important; } .u-pd-rl-all--70 { padding-right: 70px !important; padding-left: 70px !important; } .u-pd-rl-all--80 { padding-right: 80px !important; padding-left: 80px !important; } .u-pd-rl-all--90 { padding-right: 90px !important; padding-left: 90px !important; } .u-pd-rl-all--100 { padding-right: 100px !important; padding-left: 100px !important; } @media screen and (max-width: 767.9px) { .u-pd-sp--0 { padding: 0 !important; } .u-pd-sp--10 { padding: 10px !important; } .u-pd-sp--20 { padding: 20px !important; } .u-pd-sp--30 { padding: 30px !important; } .u-pd-sp--40 { padding: 40px !important; } .u-pd-sp--50 { padding: 50px !important; } .u-pd-sp--60 { padding: 60px !important; } .u-pd-sp--70 { padding: 70px !important; } .u-pd-sp--80 { padding: 80px !important; } .u-pd-sp--90 { padding: 90px !important; } .u-pd-sp--100 { padding: 100px !important; } .u-pd-tb-sp--0 { padding-top: 0 !important; padding-bottom: 0 !important; } .u-pd-tb-sp--10 { padding-top: 10px !important; padding-bottom: 10px !important; } .u-pd-tb-sp--20 { padding-top: 20px !important; padding-bottom: 20px !important; } .u-pd-tb-sp--30 { padding-top: 30px !important; padding-bottom: 30px !important; } .u-pd-tb-sp--40 { padding-top: 40px !important; padding-bottom: 40px !important; } .u-pd-tb-sp--50 { padding-top: 50px !important; padding-bottom: 50px !important; } .u-pd-tb-sp--60 { padding-top: 60px !important; padding-bottom: 60px !important; } .u-pd-tb-sp--70 { padding-top: 70px !important; padding-bottom: 70px !important; } .u-pd-tb-sp--80 { padding-top: 80px !important; padding-bottom: 80px !important; } .u-pd-tb-sp--90 { padding-top: 90px !important; padding-bottom: 90px !important; } .u-pd-tb-sp--100 { padding-top: 100px !important; padding-bottom: 100px !important; } .u-pd-rl-sp--0 { padding-right: 0 !important; padding-left: 0 !important; } .u-pd-rl-sp--10 { padding-right: 10px !important; padding-left: 10px !important; } .u-pd-rl-sp--20 { padding-right: 20px !important; padding-left: 20px !important; } .u-pd-rl-sp--30 { padding-right: 30px !important; padding-left: 30px !important; } .u-pd-rl-sp--40 { padding-right: 40px !important; padding-left: 40px !important; } .u-pd-rl-sp--50 { padding-right: 50px !important; padding-left: 50px !important; } .u-pd-rl-sp--60 { padding-right: 60px !important; padding-left: 60px !important; } .u-pd-rl-sp--70 { padding-right: 70px !important; padding-left: 70px !important; } .u-pd-rl-sp--80 { padding-right: 80px !important; padding-left: 80px !important; } .u-pd-rl-sp--90 { padding-right: 90px !important; padding-left: 90px !important; } .u-pd-rl-sp--100 { padding-right: 100px !important; padding-left: 100px !important; } } @media screen and (min-width: 768px), print { .u-pd-pc--0 { padding: 0 !important; } .u-pd-pc--10 { padding: 10px !important; } .u-pd-pc--20 { padding: 20px !important; } .u-pd-pc--30 { padding: 30px !important; } .u-pd-pc--40 { padding: 40px !important; } .u-pd-pc--50 { padding: 50px !important; } .u-pd-pc--60 { padding: 60px !important; } .u-pd-pc--70 { padding: 70px !important; } .u-pd-pc--80 { padding: 80px !important; } .u-pd-pc--90 { padding: 90px !important; } .u-pd-pc--100 { padding: 100px !important; } .u-pd-tb-pc--0 { padding-top: 0 !important; padding-bottom: 0 !important; } .u-pd-tb-pc--10 { padding-top: 10px !important; padding-bottom: 10px !important; } .u-pd-tb-pc--20 { padding-top: 20px !important; padding-bottom: 20px !important; } .u-pd-tb-pc--30 { padding-top: 30px !important; padding-bottom: 30px !important; } .u-pd-tb-pc--40 { padding-top: 40px !important; padding-bottom: 40px !important; } .u-pd-tb-pc--50 { padding-top: 50px !important; padding-bottom: 50px !important; } .u-pd-tb-pc--60 { padding-top: 60px !important; padding-bottom: 60px !important; } .u-pd-tb-pc--70 { padding-top: 70px !important; padding-bottom: 70px !important; } .u-pd-tb-pc--80 { padding-top: 80px !important; padding-bottom: 80px !important; } .u-pd-tb-pc--90 { padding-top: 90px !important; padding-bottom: 90px !important; } .u-pd-tb-pc--100 { padding-top: 100px !important; padding-bottom: 100px !important; } .u-pd-rl-pc--0 { padding-right: 0 !important; padding-left: 0 !important; } .u-pd-rl-pc--10 { padding-right: 10px !important; padding-left: 10px !important; } .u-pd-rl-pc--20 { padding-right: 20px !important; padding-left: 20px !important; } .u-pd-rl-pc--30 { padding-right: 30px !important; padding-left: 30px !important; } .u-pd-rl-pc--40 { padding-right: 40px !important; padding-left: 40px !important; } .u-pd-rl-pc--50 { padding-right: 50px !important; padding-left: 50px !important; } .u-pd-rl-pc--60 { padding-right: 60px !important; padding-left: 60px !important; } .u-pd-rl-pc--70 { padding-right: 70px !important; padding-left: 70px !important; } .u-pd-rl-pc--80 { padding-right: 80px !important; padding-left: 80px !important; } .u-pd-rl-pc--90 { padding-right: 90px !important; padding-left: 90px !important; } .u-pd-rl-pc--100 { padding-right: 100px !important; padding-left: 100px !important; } } /* ===================== pl ===================== */ .u-pl-all--0 { padding-left: 0 !important; } .u-pl-all--10 { padding-left: 10px !important; } .u-pl-all--20 { padding-left: 20px !important; } .u-pl-all--30 { padding-left: 30px !important; } .u-pl-all--40 { padding-left: 40px !important; } .u-pl-all--50 { padding-left: 50px !important; } .u-pl-all--60 { padding-left: 60px !important; } .u-pl-all--70 { padding-left: 70px !important; } .u-pl-all--80 { padding-left: 80px !important; } .u-pl-all--90 { padding-left: 90px !important; } .u-pl-all--100 { padding-left: 100px !important; } @media screen and (max-width: 767.9px) { .u-pl-sp--0 { padding-left: 0 !important; } .u-pl-sp--10 { padding-left: 10px !important; } .u-pl-sp--20 { padding-left: 20px !important; } .u-pl-sp--30 { padding-left: 30px !important; } .u-pl-sp--40 { padding-left: 40px !important; } .u-pl-sp--50 { padding-left: 50px !important; } .u-pl-sp--60 { padding-left: 60px !important; } .u-pl-sp--70 { padding-left: 70px !important; } .u-pl-sp--80 { padding-left: 80px !important; } .u-pl-sp--90 { padding-left: 90px !important; } .u-pl-sp--100 { padding-left: 100px !important; } } @media screen and (min-width: 768px), print { .u-pl-pc--0 { padding-left: 0 !important; } .u-pl-pc--10 { padding-left: 10px !important; } .u-pl-pc--20 { padding-left: 20px !important; } .u-pl-pc--30 { padding-left: 30px !important; } .u-pl-pc--40 { padding-left: 40px !important; } .u-pl-pc--50 { padding-left: 50px !important; } .u-pl-pc--60 { padding-left: 60px !important; } .u-pl-pc--70 { padding-left: 70px !important; } .u-pl-pc--80 { padding-left: 80px !important; } .u-pl-pc--90 { padding-left: 90px !important; } .u-pl-pc--100 { padding-left: 100px !important; } } /* ===================== pr ===================== */ .u-pr-all--0 { padding-right: 0 !important; } .u-pr-all--10 { padding-right: 10px !important; } .u-pr-all--20 { padding-right: 20px !important; } .u-pr-all--30 { padding-right: 30px !important; } .u-pr-all--40 { padding-right: 40px !important; } .u-pr-all--50 { padding-right: 50px !important; } .u-pr-all--60 { padding-right: 60px !important; } .u-pr-all--70 { padding-right: 70px !important; } .u-pr-all--80 { padding-right: 80px !important; } .u-pr-all--90 { padding-right: 90px !important; } .u-pr-all--100 { padding-right: 100px !important; } @media screen and (max-width: 767.9px) { .u-pr-sp--0 { padding-right: 0 !important; } .u-pr-sp--10 { padding-right: 10px !important; } .u-pr-sp--20 { padding-right: 20px !important; } .u-pr-sp--30 { padding-right: 30px !important; } .u-pr-sp--40 { padding-right: 40px !important; } .u-pr-sp--50 { padding-right: 50px !important; } .u-pr-sp--60 { padding-right: 60px !important; } .u-pr-sp--70 { padding-right: 70px !important; } .u-pr-sp--80 { padding-right: 80px !important; } .u-pr-sp--90 { padding-right: 90px !important; } .u-pr-sp--100 { padding-right: 100px !important; } } @media screen and (min-width: 768px), print { .u-pr-pc--0 { padding-right: 0 !important; } .u-pr-pc--10 { padding-right: 10px !important; } .u-pr-pc--20 { padding-right: 20px !important; } .u-pr-pc--30 { padding-right: 30px !important; } .u-pr-pc--40 { padding-right: 40px !important; } .u-pr-pc--50 { padding-right: 50px !important; } .u-pr-pc--60 { padding-right: 60px !important; } .u-pr-pc--70 { padding-right: 70px !important; } .u-pr-pc--80 { padding-right: 80px !important; } .u-pr-pc--90 { padding-right: 90px !important; } .u-pr-pc--100 { padding-right: 100px !important; } } /* ===================== pt ===================== */ .u-pt-all--0 { padding-top: 0 !important; } .u-pt-all--10 { padding-top: 10px !important; } .u-pt-all--20 { padding-top: 20px !important; } .u-pt-all--30 { padding-top: 30px !important; } .u-pt-all--40 { padding-top: 40px !important; } .u-pt-all--50 { padding-top: 50px !important; } .u-pt-all--60 { padding-top: 60px !important; } .u-pt-all--70 { padding-top: 70px !important; } .u-pt-all--80 { padding-top: 80px !important; } .u-pt-all--90 { padding-top: 90px !important; } .u-pt-all--100 { padding-top: 100px !important; } @media screen and (max-width: 767.9px) { .u-pt-sp--0 { padding-top: 0 !important; } .u-pt-sp--10 { padding-top: 10px !important; } .u-pt-sp--20 { padding-top: 20px !important; } .u-pt-sp--30 { padding-top: 30px !important; } .u-pt-sp--40 { padding-top: 40px !important; } .u-pt-sp--50 { padding-top: 50px !important; } .u-pt-sp--60 { padding-top: 60px !important; } .u-pt-sp--70 { padding-top: 70px !important; } .u-pt-sp--80 { padding-top: 80px !important; } .u-pt-sp--90 { padding-top: 90px !important; } .u-pt-sp--100 { padding-top: 100px !important; } } @media screen and (min-width: 768px), print { .u-pt-pc--0 { padding-top: 0 !important; } .u-pt-pc--10 { padding-top: 10px !important; } .u-pt-pc--20 { padding-top: 20px !important; } .u-pt-pc--30 { padding-top: 30px !important; } .u-pt-pc--40 { padding-top: 40px !important; } .u-pt-pc--50 { padding-top: 50px !important; } .u-pt-pc--60 { padding-top: 60px !important; } .u-pt-pc--70 { padding-top: 70px !important; } .u-pt-pc--80 { padding-top: 80px !important; } .u-pt-pc--90 { padding-top: 90px !important; } .u-pt-pc--100 { padding-top: 100px !important; } } /* ===================== text ===================== */ .u-text-all--left { text-align: left !important; } .u-text-all--center { text-align: center !important; } .u-text-all--right { text-align: right !important; } @media screen and (max-width: 767.9px) { .u-text-sp--left { text-align: left !important; } .u-text-sp--center { text-align: center !important; } .u-text-sp--right { text-align: right !important; } } @media screen and (min-width: 768px), print { .u-text-pc--left { text-align: left !important; } .u-text-pc--center { text-align: center !important; } .u-text-pc--right { text-align: right !important; } } .u-text_normal { font-weight: normal !important; } .u-text_bold { font-weight: bold !important; } /* ===================== width ===================== */ .u-width-all--5 { width: 5% !important; } .u-width-all--10 { width: 10% !important; } .u-width-all--15 { width: 15% !important; } .u-width-all--20 { width: 20% !important; } .u-width-all--25 { width: 25% !important; } .u-width-all--30 { width: 30% !important; } .u-width-all--35 { width: 35% !important; } .u-width-all--40 { width: 40% !important; } .u-width-all--45 { width: 45% !important; } .u-width-all--50 { width: 50% !important; } .u-width-all--55 { width: 55% !important; } .u-width-all--60 { width: 60% !important; } .u-width-all--65 { width: 65% !important; } .u-width-all--70 { width: 70% !important; } .u-width-all--75 { width: 75% !important; } .u-width-all--80 { width: 80% !important; } .u-width-all--85 { width: 85% !important; } .u-width-all--90 { width: 90% !important; } .u-width-all--95 { width: 95% !important; } .u-width-all--100 { width: 100% !important; } @media screen and (min-width: 1240px), print { .u-width-all--full { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: calc(50vw - 50%) !important; padding-right: calc(50vw - 50%) !important; } } @media screen and (max-width: 1239.9px), print { .u-width-all--full { margin-left: -20px !important; margin-right: -20px !important; padding-left: 20px !important; padding-right: 20px !important; } } @media screen and (max-width: 767.9px) { .u-width-sp--5 { width: 5% !important; } .u-width-sp--10 { width: 10% !important; } .u-width-sp--15 { width: 15% !important; } .u-width-sp--20 { width: 20% !important; } .u-width-sp--25 { width: 25% !important; } .u-width-sp--30 { width: 30% !important; } .u-width-sp--35 { width: 35% !important; } .u-width-sp--40 { width: 40% !important; } .u-width-sp--45 { width: 45% !important; } .u-width-sp--50 { width: 50% !important; } .u-width-sp--55 { width: 55% !important; } .u-width-sp--60 { width: 60% !important; } .u-width-sp--65 { width: 65% !important; } .u-width-sp--70 { width: 70% !important; } .u-width-sp--75 { width: 75% !important; } .u-width-sp--80 { width: 80% !important; } .u-width-sp--85 { width: 85% !important; } .u-width-sp--90 { width: 90% !important; } .u-width-sp--95 { width: 95% !important; } .u-width-sp--100 { width: 100% !important; } .u-width-sp--full { margin-left: -20px !important; margin-right: -20px !important; padding-left: 20px !important; padding-right: 20px !important; } } @media screen and (min-width: 768px), print { .u-width-pc--5 { width: 5% !important; } .u-width-pc--10 { width: 10% !important; } .u-width-pc--15 { width: 15% !important; } .u-width-pc--20 { width: 20% !important; } .u-width-pc--25 { width: 25% !important; } .u-width-pc--30 { width: 30% !important; } .u-width-pc--35 { width: 35% !important; } .u-width-pc--40 { width: 40% !important; } .u-width-pc--45 { width: 45% !important; } .u-width-pc--50 { width: 50% !important; } .u-width-pc--55 { width: 55% !important; } .u-width-pc--60 { width: 60% !important; } .u-width-pc--65 { width: 65% !important; } .u-width-pc--70 { width: 70% !important; } .u-width-pc--75 { width: 75% !important; } .u-width-pc--80 { width: 80% !important; } .u-width-pc--85 { width: 85% !important; } .u-width-pc--90 { width: 90% !important; } .u-width-pc--95 { width: 95% !important; } .u-width-pc--100 { width: 100% !important; } } @media screen and (min-width: 1240px), print { .u-width-pc--full { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: calc(50vw - 50%) !important; padding-right: calc(50vw - 50%) !important; } } @media screen and (max-width: 1239.9px), print { .u-width-pc--full { margin-left: -20px !important; margin-right: -20px !important; padding-left: 20px !important; padding-right: 20px !important; } } /* ===================== font weight ===================== */ .u-fw-all--bold { font-weight: 700 !important; } @media screen and (min-width: 768px) { .u-fw-pc--bold { font-weight: 700 !important; } } @media screen and (max-width: 767.9px) { .u-fw-sp--bold { font-weight: 700 !important; } } /* ===================== flex-box ===================== */ .u-fb-all { display: flex !important; } .u-fb-all--row { flex-direction: row !important; } .u-fb-all--row-reverse { flex-direction: row-reverse !important; } .u-fb-all--column { flex-direction: column !important; } .u-fb-all--column-reverse { flex-direction: column-reverse !important; } .u-fb-all--nowrap { flex-wrap: nowrap !important; } .u-fb-all--wrap { flex-wrap: wrap !important; } .u-fb-all--wrap-reverse { flex-wrap: wrap-reverse !important; } .u-fb-all--jc-start { justify-content: flex-start !important; } .u-fb-all--jc-end { justify-content: flex-end !important; } .u-fb-all--jc-center { justify-content: center !important; } .u-fb-all--jc-between { justify-content: space-between !important; } .u-fb-all--jc-around { justify-content: space-around !important; } .u-fb-all--ai-stretch { align-items: stretch !important; } .u-fb-all--ai-start { align-items: flex-start !important; } .u-fb-all--ai-end { align-items: flex-end !important; } .u-fb-all--ai-center { align-items: center !important; } .u-fb-all--ai-baseline { align-items: baseline !important; } @media screen and (min-width: 768px) { .u-fb-pc { display: flex !important; } .u-fb-pc--row { flex-direction: row !important; } .u-fb-pc--row-reverse { flex-direction: row-reverse !important; } .u-fb-pc--column { flex-direction: column !important; } .u-fb-pc--column-reverse { flex-direction: column-reverse !important; } .u-fb-pc--nowrap { flex-wrap: nowrap !important; } .u-fb-pc--wrap { flex-wrap: wrap !important; } .u-fb-pc--wrap-reverse { flex-wrap: wrap-reverse !important; } .u-fb-pc--jc-start { justify-content: flex-start !important; } .u-fb-pc--jc-end { justify-content: flex-end !important; } .u-fb-pc--jc-center { justify-content: center !important; } .u-fb-pc--jc-between { justify-content: space-between !important; } .u-fb-pc--jc-around { justify-content: space-around !important; } .u-fb-pc--ai-stretch { align-items: stretch !important; } .u-fb-pc--ai-start { align-items: flex-start !important; } .u-fb-pc--ai-end { align-items: flex-end !important; } .u-fb-pc--ai-center { align-items: center !important; } .u-fb-pc--ai-baseline { align-items: baseline !important; } } @media screen and (max-width: 767.9px) { .u-fb-sp { display: flex !important; } .u-fb-sp--row { flex-direction: row !important; } .u-fb-sp--row-reverse { flex-direction: row-reverse !important; } .u-fb-sp--column { flex-direction: column !important; } .u-fb-sp--column-reverse { flex-direction: column-reverse !important; } .u-fb-sp--nowrap { flex-wrap: nowrap !important; } .u-fb-sp--wrap { flex-wrap: wrap !important; } .u-fb-sp--wrap-reverse { flex-wrap: wrap-reverse !important; } .u-fb-sp--jc-start { justify-content: flex-start !important; } .u-fb-sp--jc-end { justify-content: flex-end !important; } .u-fb-sp--jc-center { justify-content: center !important; } .u-fb-sp--jc-between { justify-content: space-between !important; } .u-fb-sp--jc-around { justify-content: space-around !important; } .u-fb-sp--ai-stretch { align-items: stretch !important; } .u-fb-sp--ai-start { align-items: flex-start !important; } .u-fb-sp--ai-end { align-items: flex-end !important; } .u-fb-sp--ai-center { align-items: center !important; } .u-fb-sp--ai-baseline { align-items: baseline !important; } } /****************************************** サイドナビ *******************************************/ .c-direct__ttl { color: var(--ncb-black); font-size: 1.8rem; font-weight: 600; text-align: center; } /****************************************** 第2階層 / 第３階層 *******************************************/ /* ===================== category ===================== */ .c-category { width: 100%; padding-top: 80px; padding-bottom: 67px; background-position: center; background-size: cover; background-repeat: no-repeat; /* background-image: url(); // ページごとに指定 */ } .c-category__wrap { margin-bottom: 80px; } .c-category__text--inner { width: 420px; padding: 52px 0 60px 52px; margin-left: calc(50% - 42vw); background: #FFF; } .c-category__title { font-size: 36px; } .c-category__title::after { display: block; content: ""; height: 2px; background: #FC6B01; margin-top: 8px; margin-bottom: 24px; } .c-category__title::after { width: 100px; } .c-category__body { font-size: 16px; line-height: 1.7; } @media screen and (max-width: 1199.9px) and (min-width: 768px) { .c-category__wrap { width: 1200px; max-width: 100%; } } @media screen and (max-width: 767.9px) { .c-category { position: relative; padding: 30% 32%; margin-bottom: 46px; background-position: top center; background-size: contain; } .c-category:before { display: block; content: ""; width: 100%; height: 50%; background: linear-gradient(rgba(255, 255, 255, 0) 0, #FFF 80%); position: absolute; bottom: 0; left: 0; } .c-category:after { background: #FFF; bottom: -58px; } .c-category__text { width: 85%; padding: 10px 0 36px; border-radius: 4px; position: absolute; bottom: -58px; left: 0; right: 0; margin: auto; z-index: 2; } .c-category__text--inner { text-align: center; width: 100%; padding: 10px 0 36px; margin-left: auto; border-radius: 4px; } .c-category__title { font-size: 24px; } .c-category__title:after { display: none; } .c-category__title--icon { display: block; } .c-category__title--icon img { width: 52px; } .c-category__body { line-height: 1.3; margin-top: 12px; } } /* ===================== line ===================== */ .c-line--width, .c-line--vertical { display: block; background: #DDD; border: 0; } .c-line--width { width: 100%; height: 1px; margin: 20px 0; } .c-line--vertical { width: 1px; height: 100%; margin: 0 20px; } /* ===================== kv ===================== */ .c-kv img { width: 100%; } .c-kv--01 { max-width: 730px; margin: auto; } .c-kv__image { display: block; text-align: right; } .c-kv__image img { width: 65.7%; max-width: 480px; } .c-kv__box { background: var(--white); border-radius: 0 10px 10px 0; padding: 20px 15px 20px 0; width: 48.6%; max-width: 375px; height: fit-content; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .c-kv__title { font-size: 26px; margin-bottom: 15px; } .c-kv__text { font-size: 16px; } .c-kv__wrap + .c-text--note { font-size: 12px; margin-top: 15px; } .c-kv__no1-image { position: absolute; right: 3px; top: -14px; } .p-visible--875 { display: block; } .p-visible--874 { display: none; } @media screen and (min-width: 875px) and (max-width: 1059px) { .c-kv__image img { width: 62%; min-width: 370px; } .c-kv__box { min-width: 305px; } .c-kv__title { font-size: 22px; margin-bottom: 10px; } .c-kv__text { font-size: 14px; } .c-kv__no1-image { width: 111px; height: 97px; } .p-visible--875 { display: block; } .p-visible--874 { display: none; } } @media screen and (min-width: 768px) and (max-width: 874px) { .c-kv__title { font-size: 24px; margin-bottom: 20px; } .c-kv__image img { width: 100%; max-width: inherit; } .c-kv__box { position: relative; margin-top: -80px; padding: 20px 15px 0; border-radius: 10px 10px 0 0; max-width: 480px; width: calc(100% - 40px); min-height: 81px; } .c-kv__wrap + .c-text--note { max-width: 450px; font-size: 12px; margin: auto; padding-left: 20px; margin-top: 10px; } .c-kv__no1-image { width: 137px; height: 118px; } .p-visible--875 { display: none; } .p-visible--874 { display: block; } } @media screen and (max-width: 767.9px) { .c-kv__title { font-size: 24px; margin-bottom: 10px; } .c-kv__wrap { width: 100vw; margin-left: -6%; } .c-kv__image img { width: 100%; max-width: inherit; } .c-kv__box { position: relative; margin-top: -50px; padding: 15px 15px 0; border-radius: 10px 10px 0 0; max-width: inherit; width: calc(100vw - 10.6%); min-height: 51px; } .c-kv__wrap + .c-text--note { font-size: 12px; max-width: calc(100vw - 10.6% - 30px); margin: auto; padding-left: 20px; margin-top: 10px; } .c-kv__text { font-size: 15px; } .c-kv__no1-image { width: 111px; height: 97px; right: 5px; top: -10px; } .p-visible--875 { display: none; } .p-visible--874 { display: block; } } /* ===================== cv-area ===================== */ .c-cv-area { padding: 16px 12px 20px; margin-bottom: 36px; font-weight: 500; } .c-cv-area__button { width: 100%; max-width: 313px; font-size: 18px; text-align: center; background: #FC7E22; border-radius: 40px; padding: 16px 0; margin: 0 auto; transition: all 0.3s; } .c-cv-area .c-cv-area__body { color: #FFF; font-size: 18px; text-decoration: none; } @media only screen and (min-width: 768px) { .c-cv-area__button:hover { opacity: 0.8; transition: all 0.3s; } } @media print { body { -webkit-print-color-adjust: exact; } .l-header { position: static; } .l-header__bottom { padding-right: 0; } .l-header__tab-item .l-header__tab-link { font-size: 10px; } .l-header__primary-item { margin-right: 1rem; } .l-header__primary-item .l-header__primary-button { font-size: 16px; } .l-gnav__wrap { position: static; } .l-fnav__tab-item { font-size: 13px; } .l-fnav__item { width: 90%; } .l-fnav__item .l-fnav__link-main { font-size: 15px; } .l-pagetop { position: absolute; bottom: -62px; } .l-side-direct__item .l-side-direct__button--login span, .l-side-direct__item .l-side-direct__button--hojin span { font-size: 1.2rem; } .l-side-direct__item .l-side-direct__button { font-size: 1.6rem; } .l-side__service-item .l-side__service-button { display: flex; width: auto; padding-left: 10px; } .l-side__service-item .l-side__service-button:before { margin: 0 6px 0 0; position: static; } .l-side-faq .l-side-faq__button { font-size: 1.2rem; } } .a-btn { display: flex; justify-content: center; align-items: center; width: 292.5px; font-size: 15px; font-weight: 700; color: #fff; text-align: center; background: #FFDDD9; background: linear-gradient(150deg, rgb(255, 221, 217) 0%, rgb(238, 121, 0) 55%); border-radius: 25px; margin: 0 auto; height: 49.58px; position: relative; } .a-btn::before { content: ""; position: absolute; background-image: url(../img/common/icon-tab.webp); background-size: contain; background-repeat: no-repeat; width: 14.25px; height: 14.66px; top: 50%; right: 7%; transform: translateY(-50%); } .modal-area { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 9999; } .modal-area__inner { background-color: #fff; border-radius: 16px; width: 90%; max-width: 840px; position: relative; padding-bottom: 50px; } .modal-area__close { position: absolute; top: -40px; right: 15px; } .modal-area__close img { width: 24px; } .modal-area.is-open { opacity: 1; visibility: visible; } .modal-area__ttl { font-size: 20px; font-weight: 700; text-align: center; background-color: #e6e6e6; border-radius: 16px 16px 0 0; padding: 0.8em 0; margin-bottom: 40px; } .modal-area__txt { font-size: 16px; font-weight: 500; text-align: center; margin-bottom: 30px; } .modal-area__txt span { font-size: 14px; } .modal-area__cols { display: flex; justify-content: center; gap: 160px; margin-bottom: 35px; } .modal-area__qr { text-align: center; margin-bottom: 30px; } .modal-area__qr img { width: 82px; } .modal-area__app { width: 128px; } .modal-area__note { font-size: 16px; font-weight: 500; text-align: center; margin-bottom: 30px; } .modal-area__note a { color: #516bae; text-decoration: underline; } .modal-area__note2 { font-size: 12px; width: 520px; margin: 0 auto; } .is-ios .home-app__app.-g { display: none; } .is-android .home-app__app.-a { display: none; } .home-nav { position: fixed; top: 30px; right: 0; opacity: 0; visibility: hidden; transform: translateX(20px); transition: all 0.3s; width: 185px; z-index: 998; } @media screen and (max-width: 992px) { .home-nav { width: 338px; transform: translateX(100%); transition: all 0.3s; } } .home-nav.is-show { opacity: 1; visibility: visible; } @media screen and (min-width: 993px) { .home-nav.is-show { transform: translateX(0); } } @media screen and (max-width: 992px) { .home-nav.is-on { opacity: 1; transform: translateX(0); } } @media screen and (max-width: 992px) { .home-nav__inner { position: relative; } } .home-nav__items { display: flex; flex-direction: column; } @media screen and (max-width: 992px) { .home-nav__items { gap: 15px; padding: 58px 0 38px 20px; border-radius: 6px 0 0 6px; background: #ffddd9; background: linear-gradient(150deg, rgb(255, 221, 217) 0%, rgb(238, 121, 0) 55%); } } .home-nav__item a { display: flex; align-items: center; width: 100%; position: relative; font-weight: 500; color: #fff; padding-left: 12px; } @media screen and (min-width: 993px) { .home-nav__item a { height: 64px; border-radius: 6px 0 0 6px; background: #ffddd9; background: linear-gradient(150deg, rgb(255, 221, 217) 0%, rgb(238, 121, 0) 55%); } .home-nav__item a.is-active::after { width: 3px; height: 45px; top: 50%; left: -10px; transform: translateY(-50%); background-color: #415AAA; border-radius: 0; } } @media screen and (max-width: 992px) { .home-nav__item a.is-active::after { content: ""; width: 3px; height: 23px; top: 50%; left: 0; transform: translateY(-50%); background-color: #415AAA; border-radius: 0; } } .home-nav__item a::before { content: ""; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 24px; height: 24px; background-image: url(../img/home/nav-arrow.webp); background-size: contain; background-repeat: no-repeat; } @media screen and (max-width: 992px) { .home-nav__item a::before { right: 45px; background-image: url(../img/home/nav-arrow-sp.webp); } } .home-nav__item a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); border-radius: 6px 0 0 6px; } @media screen and (max-width: 992px) { .home-nav__item a::after { content: none; } } .home-nav__hamburger { position: fixed; right: 0; top: 30px; z-index: 15; transition: all 0.3s; opacity: 0; z-index: 999; } @media screen and (min-width: 993px) { .home-nav__hamburger { display: none; } } .home-nav__hamburger.is-show { opacity: 1; visibility: visible; } .home-nav__hamburger button { display: block; position: relative; width: 48px; height: 48px; } .home-nav__hamburger button span { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -8px); width: 26px; height: 2px; background-color: #000; transition: all 0.3s; } .home-nav__hamburger button span:nth-child(2) { transform: translate(-50%, 2px); } .home-nav__hamburger button span:nth-child(3) { transform: translate(-50%, 12px); } .home-nav__hamburger button.is-on span { left: calc(50% - 0px); top: calc(50% + 0px); transform: translate(-50%, -50%) rotate(45deg); background-color: #fff; } .home-nav__hamburger button.is-on span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); } /* * Remodal - v1.1.1 * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. * http://vodkabears.github.io/remodal/ * * Made by Ilya Makarov * Under MIT License */ /* ========================================================================== Remodal's default mobile first theme ========================================================================== */ /* Default theme styles for the background */ .remodal-bg.remodal-is-opening, .remodal-bg.remodal-is-opened { -webkit-filter: blur(3px); filter: blur(3px); } /* Default theme styles of the overlay */ .remodal-overlay { background: rgba(43, 46, 56, 0.9); } .remodal-overlay.remodal-is-opening, .remodal-overlay.remodal-is-closing { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .remodal-overlay.remodal-is-opening { -webkit-animation-name: remodal-overlay-opening-keyframes; animation-name: remodal-overlay-opening-keyframes; } .remodal-overlay.remodal-is-closing { -webkit-animation-name: remodal-overlay-closing-keyframes; animation-name: remodal-overlay-closing-keyframes; } /* Default theme styles of the wrapper */ .remodal-wrapper { padding: 40px 20px 0; } /* Default theme styles of the modal dialog */ .remodal { box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 30px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background: #fff; text-align: left; } .remodal.remodal-is-opening, .remodal.remodal-is-closing { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .remodal.remodal-is-opening { -webkit-animation-name: remodal-opening-keyframes; animation-name: remodal-opening-keyframes; } .remodal.remodal-is-closing { -webkit-animation-name: remodal-closing-keyframes; animation-name: remodal-closing-keyframes; } /* Vertical align of the modal dialog */ .remodal, .remodal-wrapper:after { vertical-align: middle; } /* Close button */ .remodal-close { position: absolute; top: -35px; right: 0; display: block; overflow: visible; width: 28px; height: 28px; margin: 0; padding: 0; cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; text-decoration: none; color: #95979c; border: 0; outline: 0; background: transparent; } .remodal-close:hover, .remodal-close:focus { color: #2b2e38; } .remodal-close:before, .remodal-close:after { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 30px; height: 1px; background-color: #fff; } .remodal-close:before { transform: translate(-50%, -50%) rotate(45deg); } .remodal-close:after { transform: translate(-50%, -50%) rotate(-45deg); } /* Dialog buttons */ .remodal-confirm, .remodal-cancel { font: inherit; display: inline-block; overflow: visible; min-width: 110px; margin: 0; padding: 12px 0; cursor: pointer; -webkit-transition: background 0.2s; transition: background 0.2s; text-align: center; vertical-align: middle; text-decoration: none; border: 0; outline: 0; } .remodal-confirm { color: #fff; background: #81c784; } .remodal-confirm:hover, .remodal-confirm:focus { background: #66bb6a; } .remodal-cancel { color: #fff; background: #e57373; } .remodal-cancel:hover, .remodal-cancel:focus { background: #ef5350; } /* Remove inner padding and border in Firefox 4+ for the button tag. */ .remodal-confirm::-moz-focus-inner, .remodal-cancel::-moz-focus-inner, .remodal-close::-moz-focus-inner { padding: 0; border: 0; } /* Keyframes ========================================================================== */ @-webkit-keyframes remodal-opening-keyframes { from { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; -webkit-filter: blur(0); filter: blur(0); } } @keyframes remodal-opening-keyframes { from { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; -webkit-filter: blur(0); filter: blur(0); } } @-webkit-keyframes remodal-closing-keyframes { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; -webkit-filter: blur(0); filter: blur(0); } } @keyframes remodal-closing-keyframes { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; -webkit-filter: blur(0); filter: blur(0); } } @-webkit-keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } @keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } /* Media queries ========================================================================== */ @media only screen and (min-width: 641px) { .remodal { max-width: 700px; } } /* IE8 ========================================================================== */ .lt-ie9 .remodal-overlay { background: #2b2e38; } .lt-ie9 .remodal { width: 700px; } /* * Remodal - v1.1.1 * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking. * http://vodkabears.github.io/remodal/ * * Made by Ilya Makarov * Under MIT License */ /* ========================================================================== Remodal's necessary styles ========================================================================== */ /* Hide scroll bar */ html.remodal-is-locked { overflow: hidden; -ms-touch-action: none; touch-action: none; } /* Anti FOUC */ .remodal, [data-remodal-id] { display: none; } /* Necessary styles of the overlay */ .remodal-overlay { position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; } /* Necessary styles of the wrapper */ .remodal-wrapper { position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto; text-align: center; -webkit-overflow-scrolling: touch; } .remodal-wrapper:after { display: inline-block; height: 100%; margin-left: -0.05em; content: ""; } /* Fix iPad, iPhone glitches */ .remodal-overlay, .remodal-wrapper { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Necessary styles of the modal dialog */ .remodal { position: relative; outline: none; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .remodal-is-initialized { /* Disable Anti-FOUC */ display: inline-block; } /* Slider */ /* Icons */ @font-face { font-family: "slick"; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; } /* Arrows */ .slick-prev, .slick-next { position: absolute; z-index: 1; display: block; height: 50px; width: 50px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; outline: none; background-repeat: no-repeat; background-position: center center; background-size: contain; } @media screen and (max-width: 992px) { .slick-prev, .slick-next { width: 40px; height: 40px; } } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: #000; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: calc(50% - 228px); } [dir=rtl] .slick-prev { left: auto; right: 25px; } @media screen and (max-width: 992px) { .slick-prev { left: 5%; } } @media screen and (max-width: 576px) { .slick-prev { left: 2%; } } .slick-next { right: calc(50% - 228px); } [dir=rtl] .slick-next { left: 25px; right: auto; } @media screen and (max-width: 992px) { .slick-next { right: 5%; } } @media screen and (max-width: 576px) { .slick-next { right: 2%; } } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "●"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } .home-point__slider .slick-prev { background-image: url(../img/common/slide-prev.webp); } .home-point__slider .slick-next { background-image: url(../img/common/slide-next.webp); } .custom-prev.disabled, .custom-next.disabled { opacity: 0.3; pointer-events: none; } .custom-prev.slick-disabled, .custom-next.slick-disabled { opacity: 0.3; pointer-events: none; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .home-kv { position: relative; overflow: hidden; } .home-kv__inner { position: relative; max-width: 1366px; margin: 0 auto; } @media screen and (max-width: 992px) { .home-kv__inner { max-width: 520px; } } .home-kv__img1 img { width: 100%; opacity: 0; transition: all 1s 0.2s; } .home-kv.is-fade .home-kv__img1 img { opacity: 1; } .home-kv__img2 { position: absolute; top: 0; left: 0; width: 100%; } .home-kv__img2 img { width: 100%; opacity: 0; transform: translateY(50px); transition: all 1.2s 0.5s; } .home-kv.is-fade .home-kv__img2 img { opacity: 1; transform: translateY(0); } .home-kv__img3 { position: absolute; top: 0; left: 0; width: 100%; } .home-kv__img3 img { width: 100%; opacity: 0; transform: translateY(50px); transition: all 1.2s 0.8s; } .home-kv.is-fade .home-kv__img3 img { opacity: 1; transform: translateY(0); } .home-kv__deco { position: absolute; top: 70px; left: 0; width: 460px; transform: translateX(100vw); animation: decoMove 15s linear infinite; animation-delay: 2.5s; } @media screen and (max-width: 992px) { .home-kv__deco { top: 35px; width: 378px; } } .home-kv__btn { position: absolute; top: 32px; right: 32px; width: 63px; } @media screen and (max-width: 992px) { .home-kv__btn { top: initial; bottom: 40px; right: 20px; } } .home-kv__btn button { cursor: pointer; } .home-read__inner { padding-top: 60px; } .home-read__ttl { font-size: 34px; text-align: center; margin-bottom: 45px; letter-spacing: 0.1em; font-feature-settings: "palt"; } @media screen and (max-width: 992px) { .home-read__ttl { font-size: 25px; text-align: left; } } .home-read__txt { text-align: center; line-height: 2; } @media screen and (max-width: 992px) { .home-read__txt { text-align: left; } } .home-app__inner { padding-top: 70px; } @media screen and (max-width: 992px) { .home-app__inner { padding-top: 35px; } } .home-app__area { background-color: #fff; border-radius: 8px; padding: 35px 0; } @media screen and (max-width: 992px) { .home-app__area { padding: 30px 30px 20px; } } .home-app__ttl { text-align: center; font-weight: 500; margin-bottom: 25px; } @media screen and (max-width: 992px) { .home-app__ttl { text-align: center; } } .home-app__btn button { cursor: pointer; } .home-app__link a { display: block; width: 152px; margin: 0 auto 15px; } .home-app__note { font-size: 14px; text-align: center; margin-bottom: 35px; } .home-app__note a { color: #1a0dab; text-decoration: underline; } .home-app__txt { font-size: 12px; } .home-point__inner { padding-top: 120px; } @media screen and (max-width: 992px) { .home-point__inner { padding-top: 55px; } } .home-point__ttl { font-size: 34px; font-weight: 500; text-align: center; margin-bottom: 45px; } @media screen and (max-width: 992px) { .home-point__ttl { font-size: 24px; margin-bottom: 20px; } } .home-point__area { position: relative; } .home-point__box { background-color: #fff; border-radius: 16px; padding: 55px 90px 40px; margin-bottom: 60px; } @media screen and (max-width: 992px) { .home-point__box { padding: 30px 20px 25px; border-radius: 8px; margin-bottom: 15px; } } .home-point__point { font-size: 28px; position: relative; cursor: pointer; padding: 0 0 40px 130px; border-bottom: 2px solid #EE7800; position: relative; } .home-point__point::before { content: ""; position: absolute; bottom: -2px; left: 0; height: 2px; width: 90px; background-color: #415AAA; } @media screen and (max-width: 992px) { .home-point__point::before { width: 48px; } } @media screen and (max-width: 992px) { .home-point__point { font-size: 18px; padding: 0 0 30px 70px; } } .home-point__point b { display: block; position: absolute; right: 5%; top: 40px; } .home-point__point b i { display: block; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; } .home-point__point b i:nth-child(1) { background-image: url(../img/home/open-img.webp); } .home-point__point b i:nth-child(2) { background-image: url(../img/home/close-img.webp); display: none; } .home-point__point.is-open b i:nth-child(1) { display: none; } .home-point__point.is-open b i:nth-child(2) { display: block; } .home-point__point span { width: 66px; position: absolute; top: -20px; left: 10px; } @media screen and (max-width: 992px) { .home-point__point span { width: 44px; top: 10px; } } .home-point__pointInner { padding: 40px 0; } @media screen and (max-width: 992px) { .home-point__pointInner { padding: 30px 0 0; } } .home-point__cols { margin-bottom: 60px; } .home-point__cols:last-of-type { margin-bottom: 0; } .home-point__cols.-spaceNo { margin-bottom: 0; } @media screen and (max-width: 992px) { .home-point__cols { margin-bottom: 40px; } } .home-point__cols h3 { font-size: 24px; font-weight: 500; color: #EE7800; margin-bottom: 20px; } @media screen and (max-width: 992px) { .home-point__cols h3 { font-size: 18px; margin-bottom: 12px; } } .home-point__border { background: #ff8c00; background: linear-gradient(175deg, rgb(255, 140, 0) 0%, rgb(252, 223, 181) 70%, rgb(130, 178, 246) 100%); border-radius: 8px; position: relative; } @media screen and (max-width: 992px) { .home-point__border { border-radius: 6px; margin-bottom: 13px; } .home-point__border:last-of-type { margin-bottom: 0; } } .home-point__border::before { content: ""; position: absolute; top: 1px; left: 1px; height: calc(100% - 2px); width: calc(100% - 2px); background-color: #fff; border-radius: 8px; } @media screen and (max-width: 992px) { .home-point__border::before { border-radius: 6.7px; } } .home-point__border.-bg::before { background-color: #F5F5F5; } .home-point__col { position: relative; z-index: 1; } .home-point__col.-n2 { padding: 15px 15px 0; } .home-point__col.-n3 { padding: 50px 0; } .home-point__col.-n4 { padding: 30px 0 20px; } .home-point__col.-n5 { padding-bottom: 50px; } @media screen and (max-width: 992px) { .home-point__col.-n5 { padding-bottom: 25px; } } .home-point__num1 { padding: 37px 45px; } .home-point__num2 { text-align: center; margin-bottom: 1px; margin-top: 15px; } .home-point__num2.-spaceNo { margin-top: 0; } .home-point__num2 img { width: 156px; margin-bottom: 1px; } .home-point__num3 { text-align: center; } .home-point__num3 img { width: 153px; } .home-point__txt1 { font-size: 18px; color: #EE7800; margin-bottom: 8px; } .home-point__txt2 { margin-bottom: 15px; } .home-point__txt3 { text-align: center; margin-bottom: 40px; } .home-point__txt4 { font-weight: 500; text-align: center; color: #fff; width: 230px; background-color: #7A7A7A; padding: 0.8em 0; border-radius: 24px; margin-bottom: 17px; } @media screen and (max-width: 992px) { .home-point__txt4 { margin: 0 auto 17px; } } .home-point__flex { display: flex; justify-content: center; gap: 85px; } .home-point__image { text-align: center; } .home-point__image img { width: 164px; } .home-point__slideName { color: #fff; font-weight: 500; text-align: center; padding: 1em 0; background: #ffddd9; background: linear-gradient(150deg, rgb(255, 221, 217) 0%, rgb(238, 121, 0) 55%); border-radius: 8px 8px 0 0; margin-bottom: 40px; } @media screen and (max-width: 992px) { .home-point__slideName { border-radius: 6px 6px 0 0; margin-bottom: 23px; } } .home-point__slider { margin: 0 1px; } .home-point__slide { margin: 0 25px; } .home-other__inner { padding-top: 90px; } @media screen and (max-width: 992px) { .home-other__inner { padding-top: 35px; } } .home-other__ttl { font-size: 34px; font-weight: 500; text-align: center; margin-bottom: 50px; } @media screen and (max-width: 992px) { .home-other__ttl { font-size: 24px; margin-bottom: 20px; } } .home-other__box { background-color: #fff; border-radius: 16px; padding: 47px 0; } @media screen and (max-width: 992px) { .home-other__box { padding: 25px 0; border-radius: 6px; position: relative; } .home-other__box::before, .home-other__box::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: #fff; z-index: 1; } .home-other__box::before { left: 0; } .home-other__box::after { right: 0; } } .home-other__cols { display: flex; } @media screen and (max-width: 992px) { .home-other__cols { flex-wrap: wrap; position: relative; } .home-other__cols::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 20px; height: 20px; background-color: #fff; } } .home-other__cols li { width: 25%; padding: 10px 0 15px; border-right: 1px solid #D3D3D3; } @media screen and (max-width: 992px) { .home-other__cols li { width: 50%; } .home-other__cols li:nth-of-type(-n + 2) { border-bottom: 1px solid #D3D3D3; } .home-other__cols li:nth-of-type(2) { border-right: none; } } @media screen and (max-width: 992px) { .home-other__cols li.-bottom { padding: 10px 0 26px; } } @media screen and (max-width: 992px) { .home-other__cols li.-top { padding: 30px 0 5px; } } .home-other__cols li:last-of-type { border-right: none; } .home-other__icon { text-align: center; margin-bottom: 20px; } .home-other__icon img { width: 88px; } .home-other__txt { font-size: 18px; font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center; gap: 8px; } @media screen and (max-width: 992px) { .home-other__txt { gap: 4px; } } .home-other__txt i { display: inline-block; width: 24px; height: 24px; background-image: url(../img/common/other-tab.webp); background-size: contain; background-repeat: no-repeat; } .home-qa__inner { padding-top: 130px; } @media screen and (max-width: 992px) { .home-qa__inner { padding-top: 50px; } } .home-qa__ttl { font-size: 34px; font-weight: 500; text-align: center; margin-bottom: 40px; position: relative; } @media screen and (min-width: 993px) { .home-qa__ttl { padding-bottom: 30px; } .home-qa__ttl::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 2px; background-image: url(../img/home/line.webp); background-size: contain; background-repeat: no-repeat; } } @media screen and (max-width: 992px) { .home-qa__ttl { font-size: 24px; margin-bottom: 20px; } } .home-qa__item { padding: 0 17px; background-color: #fff; border-radius: 8px; margin-bottom: 25px; } @media screen and (max-width: 992px) { .home-qa__item { margin-bottom: 12px; } } .home-qa__item li { position: relative; line-height: 1.75; } @media screen and (max-width: 992px) { .home-qa__item li { font-size: 14px; } } .home-qa__item li span { width: 16px; display: block; position: absolute; left: 0; top: 17px; } @media screen and (max-width: 992px) { .home-qa__item li span { top: 8px; } } .home-qa__item li span.-q { top: 50%; transform: translateY(-50%); } .home-qa__q { position: relative; padding: 22.5px 30px 22.5px 30px; cursor: pointer; font-weight: normal; } @media screen and (max-width: 992px) { .home-qa__q { padding: 10px 20px 10px 32px; font-size: 14px; } } .home-qa__q b { display: block; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 992px) { .home-qa__q b { right: 10px; } } .home-qa__q b i { display: block; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 25px; height: 25px; background-size: contain; background-repeat: no-repeat; } .home-qa__q b i:nth-child(1) { background-image: url(../img/home/open-img.webp); } .home-qa__q b i:nth-child(2) { background-image: url(../img/home/close-img.webp); display: none; } .home-qa__q.is-open b i:nth-child(1) { display: none; } .home-qa__q.is-open b i:nth-child(2) { display: block; } .home-qa__a { border-top: 1px solid #D3D3D3; } .home-qa__a b { font-weight: bold; } .home-qa__answer { padding: 22.5px 0 22.5px 30px; } @media screen and (max-width: 992px) { .home-qa__answer { padding: 10px 0 10px 32px; } } .home-qa__answer li span { width: 40px; display: block; position: absolute; left: 15px; top: 17px; } @media screen and (max-width: 992px) { .home-qa__answer li span { width: 26px; left: 3px; top: 8px; } } .home-qa__answer small { font-size: 12px; } ul .home-qa__answer li { position: initial; } .home-contact__inner { padding-top: 125px; } @media screen and (max-width: 992px) { .home-contact__inner { padding-top: 45px; } } .home-contact__area { background-color: #fff; border-radius: 8px; } .home-contact__ttl { font-size: 20px; font-weight: 500; text-align: center; color: #fff; background: #ffddd9; background: linear-gradient(150deg, rgb(255, 221, 217) 0%, rgb(238, 121, 0) 55%); border-radius: 8px 8px 0 0; padding: 0.8em 0; } .home-contact__cols { display: flex; padding: 40px 0 50px; } @media screen and (max-width: 992px) { .home-contact__cols { flex-direction: column; padding: 0 16.5px; } } .home-contact__col { width: 50%; } @media screen and (max-width: 992px) { .home-contact__col { width: 100%; padding: 20px 0 30px; } } @media screen and (min-width: 993px) { .home-contact__col:first-of-type { border-right: 1px solid #D3D3D3; } } @media screen and (max-width: 992px) { .home-contact__col:first-of-type { border-bottom: 1px solid #D3D3D3; } } .home-contact__txt1 { font-size: 17px; font-weight: 500; display: flex; justify-content: center; align-items: center; gap: 7px; margin-bottom: 35px; } .home-contact__txt1 i { display: inline-block; background-size: contain; background-repeat: no-repeat; } .home-contact__txt1 i.-n1 { width: 18.62px; height: 24px; background-image: url(../img/home/contact-icon1.webp); } .home-contact__txt1 i.-n2 { width: 19.71px; height: 24px; background-image: url(../img/home/contact-icon2.webp); } .home-contact__txt2 { font-size: 15px; font-weight: 500; text-align: center; margin-bottom: 12px; } .home-contact__tel { text-align: center; margin-bottom: 25px; } @media screen and (min-width: 993px) { .home-contact__tel { pointer-events: none; } } .home-contact__tel img { width: 245px; } .home-contact__txt3 { text-align: center; } /*# sourceMappingURL=styles.css.map */