@charset "UTF-8"; @import 'https://fonts.googleapis.com/css2?family=Geologica:wght,CRSV@700,0&display=swap'; @import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'; @import 'https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'; /*** 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, 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 { text-size-adjust: none; 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 { user-select: auto; 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 */ ::input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable='false'])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; user-select: auto; 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; } .header { display: flex; width: 100%; height: 60px; } .header__menu { display: flex; flex: 1; align-items: center; justify-content: space-between; } .header__logo img { display: block; width: 120px; height: 26px; } .header__menu-toggle { display: none; } .header__menu-toggle:checked ~ .header__menu .header__menu-icon .header__menu-icon-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .header__menu-toggle:checked ~ .header__menu .header__menu-icon .header__menu-icon-bar:nth-child(2) { opacity: 0; } .header__menu-toggle:checked ~ .header__menu .header__menu-icon .header__menu-icon-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .header__menu-toggle:checked ~ .header__overlay { pointer-events: auto; opacity: 1; } .header__menu-icon { display: none; flex-direction: column; row-gap: 5px; width: 44px; height: 44px; padding: 12px 10px; cursor: pointer; } .header__menu-icon-bar { display: block; width: 100%; height: 3px; transition: all 0.3s ease; border-radius: 100px; background-color: #448938; } .header__nav { display: none; position: absolute; z-index: 100; top: 60px; left: 0; flex: 3; width: 100vw; background-color: #fff; } .header__nav-list { display: flex; margin: 0; padding: 0; list-style-type: none; } .header__nav-item { display: flex; align-items: center; padding: 16px 0; background-color: #448938; text-align: center; } .header__nav-item:not(:last-child) { border-right: 0; border-bottom: 1px solid #8eac89; } .header__nav-item:last-child { border-bottom: 0; } .header__nav-link { width: 100%; color: #fff; font-family: 'Noto Sans JP'; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none; } .header__nav-link img { display: block; } .header__overlay { position: fixed; z-index: 1; transition: opacity 0.3s ease; opacity: 0; background-color: rgb(0 0 0 / 50%); pointer-events: none; inset: 60px 0 0; } .op-header { position: sticky; z-index: 1000; top: 0; height: auto; background-color: #fff; } .op-header__inner { width: 100%; height: 60px; padding-left: 16px; } .op-header__nav { display: flex; } .op-header__nav-link { padding: 0 10px; border-right: 1px solid #000; text-decoration: none; } .op-header__nav-link--primary { background-color: #16a34a; color: #fff; } .op-header__nav-link:last-child { border-right: none; } .op-header .change-link--pc { display: none; } .op-header .change-link-inline--pc { display: none; } .op-header .change-link--sp { display: block; } .op-header .change-link-inline--sp { display: inline-block; } .sec07 { background: #fff; font-size: 20.8px !important; } .sec07 .block01 .box01 dl { text-align: center; } .sec07 .block01 .box01 dl dt { margin-bottom: 30px; } .sec07 .block01 .box01 dl .link { margin-bottom: 20px; } .sec07 a { color: #3998de !important; font-weight: 700; text-decoration: none; } .sec07 a:hover { text-decoration: underline; } .footerStandard1st a { color: #333; text-decoration: none; } .footerStandard1st a:hover { text-decoration: underline; } .footerStandard1st .ftBlock01 { padding: 20px 25px 60px; background: #fff; } .footerStandard1st .ftBlock01 .ftBox01 { font-size: 70%; } .footerStandard1st .ftBlock01 .ftBox01 .txt01 { padding: 0 20px; text-align: right; } .footerStandard1st .ftBlock01 .ftBox02 { margin-top: 10px; padding: 10px 20px 0; font-size: 70%; } .footerStandard1st .ftBlock01 .ftBox02.clearfix { border-top: 1px solid #e5e5e5; } .footerStandard1st .ftBlock01 .ftBox02 .link { float: none; text-align: center; } .footerStandard1st .ftBlock01 .ftBox02 .link li { display: inline-block; font-size: 11.2px; } .footerStandard1st .ftBlock01 .ftBox02 .link li + li { margin-left: 10px; } .footerStandard1st .ftBlock01 .ftBox02 .copyright { margin-top: 10px; color: #000; font-size: 11.2px; text-align: center; } .op-close-button { width: 160px; margin: 40px auto 30px; } .op-close-button--inner { display: block; width: 100%; padding: 10px 16px; border: 1px solid #d6d6d6; border-radius: 6px; box-shadow: 0 1px 4px 1px rgb(0 0 0 / 25%); font-size: 14px; font-weight: 600; text-align: center; } .pc_disp { display: none !important; } .sp_disp { display: block !important; } .op-main * { font-family: 'Noto Sans JP', 'A P-OTF 新ゴ Pr6N', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', Meiryo, sans-serif; } .op-main .op-header__inner { max-width: 1024px; margin-inline: auto; } .op-main .op-header__inner .change-link-inline--sp { color: #fff; } .op-main .footerStandard1st .ftBlock01 { padding-bottom: 16px; } .op-main .footerStandard1st .ftBlock01 .ftBox02 { border-top: none; margin-top: 0; } .op-main .footerStandard1st .ftBlock01 .ftBox02 .link { margin: 0; } .op-main .op-member-vpoint-hr { width: 100vw; height: 1px; background: #333; max-width: 900px; margin-left: -16px; } .op-main .op-member-vpoint-content { display: flex; flex-direction: column; max-width: 900px; margin: 16px 16px 12px; gap: 32px; } .op-main .op-member-vpoint-main img { width: 100%; max-width: 100%; height: auto; vertical-align: middle; } .op-main .op-member-vpoint-charge { display: flex; flex-direction: column; gap: 8px; } .op-main .op-member-vpoint-charge-cards { display: flex; flex-direction: column; gap: 8px; } .op-main .op-member-vpoint-charge-card { flex: 1; background-color: #004099; border-radius: 8px; padding: 16px 20px; } .op-main .op-member-vpoint-charge-card__content { display: flex; flex-direction: column; text-align: center; color: #fff; gap: 12px; } .op-main .op-member-vpoint-charge-card__heading { display: flex; flex-direction: column; gap: 2px; } .op-main .op-member-vpoint-charge-card__subtitle { font-size: 16px; font-weight: 700; letter-spacing: 0.125em; line-height: 1; } .op-main .op-member-vpoint-charge-card__title { font-size: 31px; font-weight: 700; letter-spacing: -0.8px; line-height: 1; color: #fff301; } .op-main .op-member-vpoint-charge-card__asterisk { font-size: 0.6em; vertical-align: super; } .op-main .op-member-vpoint-charge-card__icon { display: flex; justify-content: center; align-items: center; } .op-main .op-member-vpoint-charge-card__icon img { width: 72px; height: auto; } .op-main .op-member-vpoint-charge-card__icon--double { gap: 8px; } .op-main .op-member-vpoint-charge-card__icon--double .op-member-vpoint-charge-card__icon-vpoint, .op-main .op-member-vpoint-charge-card__icon--double .op-member-vpoint-charge-card__icon-op { width: 48px; } .op-main .op-member-vpoint-charge-card__icon--double .op-member-vpoint-charge-card__icon-arrow { width: 15px; } .op-main .op-member-vpoint-charge-card__description { font-size: 13px; margin: 0; font-weight: 700; } .op-main .op-member-vpoint-charge-card__description strong { color: #fff301; display: block; font-size: 16px; } .op-main .op-member-vpoint-charge-note { background-color: #faf8ed; padding: 16px; border-radius: 8px; } .op-main .op-member-vpoint-charge-note__header { display: flex; flex-direction: column; gap: 4px; text-align: center; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px dashed #b8a88a; } .op-main .op-member-vpoint-charge-note__title { font-size: 15px; font-weight: 700; line-height: 1.4; } .op-main .op-member-vpoint-charge-note__description { font-size: 13px; line-height: 1.4; } .op-main .op-member-vpoint-charge-note__description strong { font-weight: 700; } .op-main .op-member-vpoint-charge-note__body { max-width: 440px; display: flex; flex-direction: column; gap: 24px; margin: 0 auto; } .op-main .op-member-vpoint-charge-note__time { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .op-main .op-member-vpoint-charge-note__time-label { font-size: 13px; font-weight: 700; line-height: 1.4; margin-right: 8px; white-space: nowrap; } .op-main .op-member-vpoint-charge-note__time-divider { display: block; width: 1px; background-color: #000; align-self: stretch; height: 34px; } .op-main .op-member-vpoint-charge-note__time-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; font-size: 11px; line-height: 1.5; } .op-main .op-member-vpoint-charge-note__time-list strong { font-weight: 700; letter-spacing: -0.02em; } .op-main .op-member-vpoint-charge-note__timeline { width: 100%; height: auto; vertical-align: middle; } .op-main .op-member-vpoint-procedure__title { text-align: center; font-size: 20px; font-weight: 700; margin: 0 0 24px; } .op-main .op-member-vpoint-procedure__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; } .op-main .op-member-vpoint-procedure__cta { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .op-main .op-member-vpoint-procedure__button { display: flex; width: 311px; height: 48px; padding: 0 12px 0 32px; align-items: center; gap: 4px; border-radius: 24px; background: #004099; text-decoration: none; } .op-main .op-member-vpoint-procedure__button--pc { display: none; } .op-main .op-member-vpoint-procedure__button--sp { display: flex; } .op-main .op-member-vpoint-procedure__button:hover { opacity: 0.7; } .op-main .op-member-vpoint-procedure__button-text { flex: 1; text-align: center; color: #fff100; font-weight: 600; font-size: 16px; } .op-main .op-member-vpoint-procedure__button-icon { width: 16px; height: 16px; flex-shrink: 0; color: #fff100; } .op-main .op-member-vpoint-procedure__link { color: #2b67d7; text-align: center; font-size: 11px; font-weight: 300; line-height: 1.2; text-decoration: none; } .op-main .op-member-vpoint-procedure__link:hover { opacity: 0.7; } .op-main .op-member-vpoint-procedure-item { background-color: #faf8ed; border-radius: 8px; display: flex; flex-direction: column; } .op-main .op-member-vpoint-procedure-item__header { display: flex; flex-direction: row; align-items: center; padding-inline: 16px; gap: 16px; } .op-main .op-member-vpoint-procedure-item__number { font-family: 'Bebas Neue', sans-serif; font-size: 48px; font-weight: 400; color: #004099; line-height: 1.35; } .op-main .op-member-vpoint-procedure-item__description { font-size: 13px; line-height: 1.35; } .op-main .op-member-vpoint-procedure-item__description strong { font-weight: 700; } .op-main .op-member-vpoint-procedure-item__description-br { display: none; } .op-main .op-member-vpoint-procedure-item__description-br--sp { display: inline; } .op-main .op-member-vpoint-procedure-item__image { flex: 1; } .op-main .op-member-vpoint-procedure-item__image img { width: 100%; height: auto; vertical-align: middle; } .op-member-vpoint-caution { display: flex; flex-direction: column; align-items: center; gap: 16px; } .op-member-vpoint-caution__title { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.48px; margin: 0; } .op-member-vpoint-caution__list { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; max-width: 420px; list-style: none; margin: 0; padding: 0; } .op-member-vpoint-caution__item { display: flex; align-items: flex-start; gap: 4px; font-size: 11px; line-height: 1.35; } .op-member-vpoint-caution__item-marker { flex-shrink: 0; } .op-member-vpoint-caution__item-text { flex: 1; } .op-member-vpoint-caution__cta { display: flex; justify-content: center; } .op-member-vpoint-caution__button { display: flex; width: 311px; height: 48px; padding: 0 12px 0 32px; align-items: center; gap: 4px; border-radius: 24px; border: 2px solid #004099; color: #004099; } .op-member-vpoint-caution__button:hover { opacity: 0.7; } .op-member-vpoint-caution__button-text { flex: 1; text-align: center; font-size: 16px; font-weight: 600; line-height: 100%; letter-spacing: -0.32px; } .op-member-vpoint-caution__button-icon { width: 16px; height: 16px; flex-shrink: 0; color: #004099; } .op-member-vpoint-cta-cards { display: flex; flex-direction: column; gap: 16px; } .op-member-vpoint-cta-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 16px; background-color: #faf8ed; border-radius: 8px; } .op-member-vpoint-cta-card__title { text-align: center; font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -0.02em; } .op-member-vpoint-cta-card__description { text-align: center; font-size: 11px; line-height: 1.2; margin: 0; } .op-member-vpoint-cta-card__button { display: flex; width: 311px; height: 48px; padding: 0 12px 0 32px; align-items: center; gap: 4px; border-radius: 24px; text-decoration: none; } .op-member-vpoint-cta-card__button--filled { background: #004099; border: none; } .op-member-vpoint-cta-card__button--filled:hover { opacity: 0.7; } .op-member-vpoint-cta-card__button--outline { background: #fff; border: 2px solid #004099; } .op-member-vpoint-cta-card__button--outline:hover { opacity: 0.7; } .op-member-vpoint-cta-card__button--pc { display: none; } .op-member-vpoint-cta-card__button--sp { display: flex; } .op-member-vpoint-cta-card__button-text { flex: 1; text-align: center; font-size: 16px; font-weight: 700; line-height: 100%; letter-spacing: -0.02em; } .op-member-vpoint-cta-card__button--filled .op-member-vpoint-cta-card__button-text { color: #fff100; } .op-member-vpoint-cta-card__button--outline .op-member-vpoint-cta-card__button-text { color: #004099; } .op-member-vpoint-cta-card__button-icon { width: 16px; height: 16px; flex-shrink: 0; } .op-member-vpoint-cta-card__button--filled .op-member-vpoint-cta-card__button-icon { color: #fff100; } .op-member-vpoint-cta-card__button--outline .op-member-vpoint-cta-card__button-icon { color: #004099; } @media screen and (width >= 769px) { .op-main .op-member-vpoint-hr { width: 100%; margin-inline: auto; } .op-main .op-member-vpoint-content { gap: 56px; margin: 56px auto; } .op-main .op-member-vpoint-charge { gap: 16px; } .op-main .op-member-vpoint-charge-cards { flex-direction: row; gap: 16px; } .op-main .op-member-vpoint-charge-card { padding: 24px 16px; } .op-main .op-member-vpoint-charge-card__content { gap: 8px; } .op-main .op-member-vpoint-charge-card__heading { gap: 6px; } .op-main .op-member-vpoint-charge-card__subtitle { font-size: 20px; line-height: 1.2; } .op-main .op-member-vpoint-charge-card__title { font-size: 40px; } .op-main .op-member-vpoint-charge-card__icon { margin-top: 4px; } .op-main .op-member-vpoint-charge-card__description { line-height: 1.4; } .op-main .op-member-vpoint-charge-card__description strong { font-size: 18px; } .op-main .op-member-vpoint-charge-note { border-radius: 0; } .op-main .op-member-vpoint-charge-note__header { margin-bottom: 16px; } .op-main .op-member-vpoint-charge-note__description-br { display: none; } .op-main .op-member-vpoint-charge-note__body { max-width: 100%; gap: 20px; margin-left: 8px; flex-direction: row; align-items: center; justify-content: space-between; } .op-main .op-member-vpoint-charge-note__time { gap: 24px; } .op-main .op-member-vpoint-charge-note__time-label { font-size: 15px; margin-right: 0; } .op-main .op-member-vpoint-charge-note__time-divider { height: 80px; } .op-main .op-member-vpoint-charge-note__time-list { font-size: 13px; } .op-main .op-member-vpoint-charge-note__timeline-wrap { flex: 1; max-width: 440px; } .op-main .op-member-vpoint-procedure__title { font-size: 24px; margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.5px; } .op-main .op-member-vpoint-procedure__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; } .op-main .op-member-vpoint-procedure__cta { margin-top: 32px; } .op-main .op-member-vpoint-procedure__button--pc { display: flex; } .op-main .op-member-vpoint-procedure__button--sp { display: none; } .op-main .op-member-vpoint-procedure__link { font-size: 13px; } .op-main .op-member-vpoint-procedure-item { flex-direction: row; } .op-main .op-member-vpoint-procedure-item__header { flex-direction: column; align-items: flex-start; flex-shrink: 0; width: 154px; padding: 0; margin-left: 16px; margin-top: 20px; gap: 0; } .op-main .op-member-vpoint-procedure-item__description-br { display: inline; } .op-main .op-member-vpoint-procedure-item__description-br--sp { display: none; } .op-main .op-member-vpoint-procedure-item__image { max-width: 256px; } .op-member-vpoint-caution__title { font-size: 24px; } .op-member-vpoint-caution__cta { margin-top: 16px; } .op-member-vpoint-cta-cards { flex-direction: row; } .op-member-vpoint-cta-card { padding: 32px 24px; } .op-member-vpoint-cta-card__title { font-size: 24px; } .op-member-vpoint-cta-card__button--pc { display: flex; } .op-member-vpoint-cta-card__button--sp { display: none; } } @media screen and (width >= 830px) { .op-close-button { margin: 20px auto 0; } .op-close-button--inner { display: none; } } @media screen and (width >= 1000px) { .header__logo img { width: 159px; height: 34px; } .header__nav { display: flex; position: unset; align-items: center; justify-content: right; width: unset; } .header__nav-item { display: flex; padding: 0 10px; background-color: #fff; } .header__nav-item:not(:last-child) { border-right: solid 1px #000; border-bottom: 0; } .header__nav-link { color: #000; font-size: 14.4px; font-weight: 400; } .header__overlay { display: none; } .op-header__inner { padding-inline: 36px 76px; } .op-header .change-link--pc { display: block; } .op-header .change-link-inline--pc { display: inline-block; } .op-header .change-link--sp { display: none; } .op-header .change-link-inline--sp { display: none; } .pc_disp { display: block !important; } .sp_disp { display: none !important; } .op-main .footerStandard1st .ftBlock01 { padding: 8px 16px 32px; } } @media (width < 1000px) { .header__menu-icon { display: flex; } .header__menu-toggle:checked ~ .header__nav { display: block; } .header__nav-list { flex-direction: column; } } @media screen and (width < 1000px) { .sec07 img { width: 100%; height: auto; } .sec07 .inner96 { padding: 0 2%; } .sec07 { padding: 20px 0 0; background: #fff; } .sec07 .block01 .box01 { margin-bottom: 20px; } .sec07 .block01 .box01 dl { text-align: center; } .sec07 .block01 .box01 dl dt { margin-bottom: 20px; } .sec07 .block01 .box01 dl dd { font-size: 3.2vw; text-align: left; } .sec07 .block01 .box01 dl .link { margin-bottom: 20px; text-align: center; } .footerStandard1st { width: 100%; } .footerStandard1st .ftBlock01 { padding: 0; background: #fff; } .footerStandard1st .ftBlock01 .ftBox01 .link01 { width: 100%; padding: 0 2%; font-size: 3.2vw; text-align: right; } .footerStandard1st .ftBlock01 .ftBox02 { width: 100%; margin-top: 10px; padding: 0; } .footerStandard1st .ftBlock01 .ftBox02 .link { width: 100%; margin-bottom: 20px; border-top: none; border-bottom: 1px solid #b4b4b4; text-align: left; } .footerStandard1st .ftBlock01 .ftBox02 .link li { width: 100%; border-top: 1px solid #b4b4b4; } .footerStandard1st .ftBlock01 .ftBox02 .link li + li { margin-left: 0; } .footerStandard1st .ftBlock01 .ftBox02 .link li a { display: block; width: 100%; padding: 10px 0 10px 2%; background: #eee; font-size: 120%; } .footerStandard1st .ftBlock01 .ftBox02 .link li a:hover { text-decoration: none; } .footerStandard1st .ftBlock01 .ftBox02 .txt01 { width: 100%; margin-bottom: 20px; font-size: 1.2rem; text-align: center; } .footerStandard1st .ftBlock01 .ftBox02 .copyright { width: 100%; padding: 2% 0; font-size: 90%; text-align: center; } }