@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@100..900&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 */ ::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 .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-membership { background: url('/member/membership/images/bg.png') no-repeat center top 300px / cover; } .op-main .op-membership * { -webkit-font-smoothing: antialiased; } .op-main .op-membership img { width: 100%; max-width: 100%; vertical-align: middle; } .op-main .op-membership :where(a, button):focus-visible { outline: revert; outline-offset: 2px; } .op-main .op-membership-heading { color: #fff; font-size: 24px; font-weight: 700; text-align: center; padding: 0 10px 8px; position: relative; margin-bottom: 24px; } .op-main .op-membership-heading::after { width: 43px; height: 2px; background: #e30c0c; color: #fff; content: ''; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); } .op-main .op-membership-heading--white::after { background: #fff; } .op-main .op-membership-heading--geologica { font-family: Geologica, sans-serif; } .op-main .op-membership-summary { margin-top: 32px; } .op-main .op-membership-summary__body { background: #0d0e0f; padding: 24px 16px 32px; } .op-main .op-membership-summary__title { color: #fff; font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 16px; } .op-main .op-membership-summary__title strong { color: #f3e73c; } .op-main .op-membership-summary__container { background: url('/member/membership/images/bg_summary_sp.jpg') no-repeat center/cover; border-radius: 4px; padding: 16px; } .op-main .op-membership-summary__details { background: #1e2124; border-radius: 2px; padding: 16px; } .op-main .op-membership-summary__label { color: #fff; font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 16px; } .op-main .op-membership-summary__text { color: #fff; font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: -0.4px; } .op-main .op-membership-summary__text strong { color: #f3e73c; font-weight: 400; } .op-main .op-membership-summary__actions { background: #0d0e0f; padding: 0 32px 24px; } .op-main .op-membership-summary__button { background: url('/member/membership/images/icon_arrow_right.svg') no-repeat right 16px center; border: 1px solid #fff; border-radius: 200px; color: #fff; display: block; font-size: 14px; font-weight: 600; text-align: center; line-height: 1.1; padding: 16px; } .op-main .op-membership-summary__button:link, .op-main .op-membership-summary__button:visited, .op-main .op-membership-summary__button:active, .op-main .op-membership-summary__button:hover { color: #fff; } .op-main .op-membership-benefits { background: url('/member/membership/images/bg_benefits.png') no-repeat center/cover; padding: 32px 16px 48px; } .op-main .op-membership-benefits__image { margin: 16px 0 8px; } .op-main .op-membership-benefits__caption { color: #fff; font-size: 12px; font-weight: 400; text-align: right; letter-spacing: 0; } .op-main .op-membership-benefits__text { color: #fff; font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0; margin-top: 16px; } .op-main .op-membership-faq { padding: 32px 0; } .op-main .op-membership-faq__body { background: #0d0e0f; padding: 24px 0; } .op-main .op-membership-faq__text { color: #fff; font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 16px; } .op-main .op-membership-faq__content { background: #303030; color: #fff; margin-bottom: 1px; } .op-main .op-membership-faq__question { background: url('/member/membership/images/icon_arrow.svg') no-repeat right 16px center; font-size: 14px; font-weight: 500; display: flex; align-items: center; padding: 16px 40px 16px 16px; list-style: none; cursor: pointer; outline: none; } .op-main .op-membership-faq__question::-webkit-details-marker { display: none; } .op-main .op-membership-faq__question:focus-visible { outline: revert; outline-offset: 2px; } .op-main .op-membership-faq__question strong { color: #e30c0c; font-family: Geologica, sans-serif; font-size: 18px; font-weight: 700; margin-right: 8px; } .op-main .op-membership-faq__answer { overflow: hidden; padding: 0 16px; } .op-main .op-membership-faq__answer strong { font-family: Geologica, sans-serif; font-size: 18px; font-weight: 700; margin-right: 10px; } .op-main .op-membership-faq__inner { border-top: 1px solid #7f7f7f; font-size: 14px; font-weight: 500; display: flex; align-items: center; padding: 16px 0; } .op-main .op-membership-fixed { width: 100%; background: rgb(255 255 255 / 70%); padding: 16px; position: fixed; left: 0; bottom: -100%; transition: 0.5s; z-index: 10000; } .op-main .op-membership-fixed.is-fixed { bottom: 0; } .op-main .op-membership-fixed__button { max-width: 420px; background: url('/member/membership/images/icon_arrow_right.svg') no-repeat right 22px center; background-color: #e9a71e; border-radius: 200px; box-shadow: 0 3px 9px rgb(0 0 0 / 30%); color: #fff; display: block; font-size: 18px; font-weight: 600; text-align: center; padding: 18px 22px; margin: 0 auto; } .op-main .op-membership-fixed__button strong { background: #fff; border-radius: 2px; color: #eaa119; font-size: 16px; font-weight: 600; padding: 1px 4px 3px; margin-right: 8px; } .op-main .op-membership-fixed__button:link, .op-main .op-membership-fixed__button:visited, .op-main .op-membership-fixed__button:active, .op-main .op-membership-fixed__button:hover { color: #fff; } @media screen and (width >= 769px) { .op-main .op-membership { background-position: center top; } .op-main .op-membership a:hover { opacity: 0.7; } .op-main .op-membership-heading { font-size: 32px; margin-bottom: 32px; } .op-main .op-membership-summary__body { padding: 32px 16px; } .op-main .op-membership-summary__title { font-size: 18px; margin-bottom: 32px; } .op-main .op-membership-summary__title br { display: none; } .op-main .op-membership-summary__container { max-width: 744px; background-image: url('/member/membership/images/bg_summary.jpg'); margin: 0 auto; } .op-main .op-membership-summary__label { font-size: 18px; } .op-main .op-membership-summary__text { font-size: 16px; text-align: center; } .op-main .op-membership-summary__actions { padding: 0 32px 32px; } .op-main .op-membership-summary__button { max-width: 343px; margin: 0 auto; } .op-main .op-membership-benefits { padding: 32px 16px; } .op-main .op-membership-benefits__figure { max-width: 480px; margin: 0 auto; } .op-main .op-membership-benefits__image { margin-top: 0; } .op-main .op-membership-benefits__text { max-width: 744px; margin: 16px auto 0; } .op-main .op-membership-faq__body { padding: 32px 0; } .op-main .op-membership-faq__text { margin-bottom: 32px; } .op-main .op-membership-faq__content { max-width: 744px; margin: 0 auto 1px; } .op-main .op-membership-fixed__button { font-size: 20px; } .op-main .op-membership-fixed__button strong { font-size: 18px; } .op-main .op-membership-fixed__button:hover { background-color: #edbf5f; opacity: 1 !important; } } @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; } }